Ajax進行檔案與參數上傳步奏詳解
这次给大家带来Ajax进行文件与参数上传步奏详解，Ajax进行文件与参数上传的注意事项有哪些，下面就是实战案例，一起来看一下。
文件上传：
记得前一段时间，为了研究Ajax文件上传，找了很多资料，在网上看到的大部分是form表单的方式提交文件，对于Ajax方式提交文件并且也要提交表单中其他数据，发现提及的并不是很多，后来在同事的帮助下，使用ajaxfileupload最终完成了文件上传与其他提交的操作，现在分享给大家，希望大家能有有所帮助。
操作步骤：
1 导入jar包：
我们在使用文件上传时，需要使用到两个jar包，分别是commons-io与commons-fileupload，在这里我使用的两个版本分别是2.4与1.3.1版本的，需要使用JS文件与jar包最后会发给大家一个连接（如何失效请直接我给留言，我会及时更改，谢谢）。
2 修改配置文件：
当我们导入的jar包是不够的，我们需要使用到这些jar包，由于我当时使用的是SSM框架，所以我是在application-content.xml中配置一下CommonsMultipartResolver，具体配置方法如下：
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <property name="maxUploadSize"> <value>104857600</value> </property> <property name="maxInMemorySize"> <value>4096</value> </property> </bean>
3 JSP文件：
大家对form表单提交问价的方式很熟悉，但是我们有很多情况下并不能直接使用form表单方式直接提交。这时候我们就需要使用Ajax方式提交，Ajax有很多的好处，比如当我们不需要刷新页面获希望进行局部刷新的时候，我们就可以使用Ajax。下面是我的表单提交的JSP页面，其中包含JS的详细步骤和HTML文件：
<%@ page language="java" contentType="text/html; charset=GBK"
pageEncoding="GBK"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ include file="../commons/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>发布资讯</title>
<script type="text/javascript" src="${ctx}/resources/new_js/jquery.js"></script>
<script type="text/javascript" src="${ctx}/resources/js/ajaxfileupload.js"></script>
<script type="text/javascript">
function save(){
var typeId = $("#type_span_info").attr("data-id");
if (typeof (typeId) == "undefined") {
$("#type_p_info").show();
return;
} else {
$("#type_p_info").hide();
}
var title = $("#title_input_info").val();
var summary = $("#summary_input_info").val();
var content = $("#content_textarea_info").val();
$.ajaxFileUpload({
url : "${ctx}/info/doUpload",
secureuri : false,//是否需要安全协议
fileElementId : 'file',
type : 'POST', //文件提交的方式
dataType : 'string',
cache : false, //是否进行页面缓存
async : true, // 是否同步提交
success : function(data) {
$.ajax({
url : '${ctx}/info/addInfo?fileUrl='+data,
type : 'post',
data:{title:title,summary:summary,content:content,typeId:typeId},
async : false,
success : function(result) {
if (result == 1) {
$("#del_prompt_p").text("添加成功");
fnError3();
} else if (result == 2) {
$("#del_prompt_p").text("添加失败")
fnError2();
} else {
$("#del_prompt_p").text("系统错误");
fnError2();
}
}
});
}
});
}
</script>
</head>
<body class="body_bg">
<p class="main">
<!--页面主体 start-->
<p class="main_content">
<p class="later_index clear wrap">
<p class="later_right fr">
<p class="roll_parent" id="roll_parent">
<p class="scroll_parent" id="scroll_parent">
<p class="scroll" id="scroll"></p>
</p>
<p class="roll_son" id="roll_son">
<p class="later_content later_content1">
<p class="release_name">
<h3>
<span>发布资讯</span>
</h3>
</p>
<p class="issue_content">
<form action="" id="form1" method="post" enctype="multipart/form-data">
<table class="issue_tab">
<tbody>
<tr>
<td><p><i>*</i><strong>标题</strong></p>
</td>
</tr>
<tr>
<td><input id="title_input_info" name="title_input_info" type="text" placeholder="最多可以输入40个字" type="text" maxlength="40"/>
<!-- <span class="colse"></span> -->
<p class="colse_tip"></p>
<!-- <p class="colse_tip" id="title_p_info" style="display:hidden;">请选择标题！</p> -->
</td>
</tr>
<tr>
<td><p><i>*</i><strong>摘要</strong></p></td>
</tr>
<tr>
<td><input name="summary_input_info" id="summary_input_info" type="text" placeholder="最多可以输入100个字" type="text" maxlength="100" />
<p class="colse_tip"></p></td>
</tr>
<tr>
<td><p><i>*</i><strong>内容</strong></p>
</td>
</tr>
<tr>
<td><textarea name="content_textarea_info" id="content_textarea_info"></textarea>
<p class="colse_tip"></p></td>
</tr>
<tr>
<td><p><i>*</i><strong>选择行业</strong></p>
<p class="colse_tip" id="type_p_info" style="display:hidden;">请选择行业！</p></td>
</tr>
<tr>
<td>
<p class="next_select select_width select_bg" id="next_select0">
<span id="type_span_info">请选择</span>
</p>
<p class="select_box select_top select_width" data-id="" id="select_box0">
<ul>
<li class="curr" data-id="2">化工</li>
<li data-id="3">装备制造</li>
<li data-id="4">生物医药</li>
<li data-id="5">电子信息</li>
<li data-id="6">其他</li>
</ul>
</p>
</td>
</tr>
<tr>
<td>
<input type="button" class="isue_inp_btn" value="添加图片"/>
<input type="text" id="issue_input_text" class="issue_text" />
<input type="file" id="file" name="file" class="issue_file" onchange="javaScript:validate_img(this)" />
</td>
</tr>
</tbody>
</table>
</form>
</p>
<p class="financial_pro_icon">
<p class="financial_pro_icon_l issue_btn1">
<a href="javaScript:save();">发布</a>
</p>
<p class="financial_pro_icon_r issue_btn1">
<a href="${ctx}/info/gotoInfo?index=2">取消</a>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
<!--页面主体 end-->
</p>
</body>
</html>上面的代码是我在项目实际开发的过程中所用的代码，具体的CSS文件与JS文件我已经删掉了，但是不会影响具体的操作，大家使用的时候只需要把其中的class文件删掉了就可以了。好了，我们在说一说上面的代码。首先为大家解释一下ctx的作用，在我们项目开发的过程中，我们要求必须使用绝对路径，所有{ctx}是我们封装好的一个东西，就是我们的服务器地址+端口号+项目名称。当我们使用的时候，只需要引用一下文件，就是上面直接使用的<%@ include file=”../commons/taglibs.jsp”%>，当我们用的时候直接使用${ctx}就可以，大家在使用的时候就直接使用自己的本机地址端口号与项目名称就可以。后面的/resources/new_js/jquery.js就是我们要使用的jqery.js文件的存放地址。
其实在上面的Ajax的操作中，我相当于做了两次的Ajax的提价，但是在第一次提交的时候，后台给我们返回一个参数，就是我们的文件存放路径与文件名称，在第二次提交的时候，我们将这些参数与其他参数同时上传到后台，并将这些参数保存到数据库中，以便我们使用。
* 4 后台代码：
//文件上传
@RequestMapping(value = "/doUpload", method = RequestMethod.POST, produces = "text/html; charset=UTF-8")
@ResponseBody
public String doUpload(HttpServletRequest request, HttpServletResponse response) throws IOException {
List<String> fileNames = null;
if (request instanceof MultipartHttpServletRequest) {
// process the uploaded file
logger.info("=====进入文件类型选择=====");
fileNames = uploadAttachment(request, "file");
}
String url = "";
if (fileNames.size() > 0) {
for (int i = 0; i < fileNames.size(); i++) {
url = url + fileNames.get(i);
if(i < fileNames.size() - 1){
url = url + ",";
}
}
}
return url;
}
//文件上传的工具类
public List<String> uploadAttachment(HttpServletRequest request, String type) throws IOException {
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
List<MultipartFile> files = multipartRequest.getFiles(type);
logger.info("数据长度========>>>>>>>>>>" + files.size());
Calendar now = Calendar.getInstance();
int year = now.get(Calendar.YEAR);
int month = now.get(Calendar.MONTH) + 1;
String realPath = PropertiesUtil.getProperty("realPath");
System.err.println("realpath=====>>>>>" + realPath);
//String savePath = request.getSession().getServletContext().getRealPath("/") + "p_image\\" + type + "\\" + year+ "\\" + month + "\\";
String savePath = "government"+ File.separator + "image"+ File.separator + year+ File.separator + month + File.separator;
logger.info("保存路径=====>" + savePath);
List<String> fileNames = new ArrayList<String>();
for (MultipartFile multipartFile : files) {
logger.info("--" + multipartFile.getOriginalFilename());
String fileName = multipartFile.getOriginalFilename();
String prefix = fileName.substring(fileName.lastIndexOf(".") + 1);
String custName = "" + System.currentTimeMillis() + "." + prefix;
if (UsedUtil.isNotNull(fileName)) {
File targetFile = new File(realPath+savePath, custName);
// fileName = year+"-"+month+"-"+fileName;
if (!targetFile.exists()) {
targetFile.mkdirs();
multipartFile.transferTo(targetFile);
}
try {
} catch (Exception e) {
e.printStackTrace();
}
fileNames.add(savePath + custName);
}
}
return fileNames;
}
//添加咨询
@RequestMapping(value = "/addInfo", method = RequestMethod.POST)
@ResponseBody
public Integer addInfo(HttpServletRequest request, HttpServletResponse response,
@RequestParam String fileUrl) {
InfoBean bean = new InfoBean();
if(UsedUtil.isNotNull(fileUrl)){
bean.setImagePath(fileUrl);
}
Map<String, Object> paramMap = ControllerUtil.request2Map(request);
bean.setTitle((String) paramMap.get("title"));
bean.setSummary((String) paramMap.get("summary"));
bean.setContent((String) paramMap.get("content"));
bean.setTypeId((String)paramMap.get("typeId"));
return infoService.insInfo(bean);
}在上面的代码中我们可以看到，在文件第一次上传的过程中，我们首先进入到doUpload中，然后使用uploadAttachment工具类，并将文件上传到服务器中，在上传的过程中，我首先做了一个文件唯一名称的操作，就是获取当前时间的毫秒数，虽然不能绝对保证，但是到并发量小的时候可以保证不会造成文件名称重复。然后，我将文件上传的路径的上传地址写到了.properties中，这样的好处是当我们想更换文件上传的路径时，我们就可以直接修改.properties文件，而读取.properties文件的具体方式在我的另一篇文章中讲到。最后，我们在开发的过程中，文件保存一般是保存到文件服务器中，而文件服务器一般是在Linux中，而在不同的服务器中，路径是使用斜杠还是反斜杠是不同的，所有我在这里面使用了File.separator来代替，File.separator在不同的系统中可以自动生成斜杠获反斜杠。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上是Ajax進行檔案與參數上傳步奏詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
如何在QQ音樂上傳歌詞
Feb 23, 2024 pm 11:45 PM
隨著數位時代的到來，音樂平台成為人們獲取音樂的主要途徑之一。然而，有時候我們在聽歌的時候，發現沒有歌詞是一件十分困擾的事。許多人都希望在聽歌的時候能夠展現歌詞，以便更好地理解歌曲的內容和情感。而QQ音樂作為國內最大的音樂平台之一，也為用戶提供了上傳歌詞的功能，使得用戶可以更好地享受音樂的同時，感受到歌曲的內涵。以下將介紹一下在QQ音樂上如何上傳歌詞。首先
酷狗上傳自己的音樂的簡單步驟
Mar 25, 2024 pm 10:56 PM
1.打開酷狗音樂，點選個人頭像。 2、點選右上角設定的圖示。 3.點選【上傳音樂作品】。 4.點選【上傳作品】。 5.選擇歌曲，然後點選【下一步】。 6.最後點選【上傳】即可。
解決jQuery AJAX請求遇到403錯誤的方法
Feb 20, 2024 am 10:07 AM
標題：解決jQueryAJAX請求出現403錯誤的方法及程式碼範例403錯誤是指伺服器禁止存取資源的請求，通常會導致出現這個錯誤的原因是請求缺少權限或被伺服器拒絕。在進行jQueryAJAX請求時，有時會遇到這種情況，本文將介紹如何解決這個問題，並提供程式碼範例。解決方法：檢查權限：首先要確保請求的URL位址是正確的，同時驗證是否有足夠的權限來存取該資
PHP 與 Ajax：建立一個自動完成建議引擎
Jun 02, 2024 pm 08:39 PM
使用PHP和Ajax建置自動完成建議引擎：伺服器端腳本：處理Ajax請求並傳回建議(autocomplete.php)。客戶端腳本：發送Ajax請求並顯示建議(autocomplete.js)。實戰案例：在HTML頁面中包含腳本並指定search-input元素識別碼。
解決jQuery AJAX請求403錯誤的方法
Feb 19, 2024 pm 05:55 PM
jQuery是一個受歡迎的JavaScript函式庫，用來簡化客戶端端的開發。而AJAX則是在不重新載入整個網頁的情況下，透過發送非同步請求和與伺服器互動的技術。然而在使用jQuery進行AJAX請求時，有時會遇到403錯誤。 403錯誤通常是伺服器禁止存取的錯誤，可能是由於安全性原則或權限問題導致的。在本文中，我們將討論如何解決jQueryAJAX請求遭遇403錯誤
C++ 函式參數型別安全檢查
Apr 19, 2024 pm 12:00 PM
C++參數類型安全檢查透過編譯時檢查、執行時間檢查和靜態斷言確保函數只接受預期類型的值，防止意外行為和程式崩潰：編譯時類型檢查：編譯器檢查類型相容性。運行時類型檢查：使用dynamic_cast檢查類型相容性，不符則拋出異常。靜態斷言：在編譯時對型別條件進行斷言。
i9-12900H參數評測大全
Feb 23, 2024 am 09:25 AM
i9-12900H是14核心的處理器，使用的架構和工藝都是全新的，線程也很高，整體的工作都是很優秀的，一些參數都有提升特別的全面，是可以給用戶們帶來極佳體驗的。 i9-12900H參數評測大全評測：1、i9-12900H是14核心的處理器，採用了q1架構以及24576kb的製程工藝，提升到了20個執行緒。 2.最大的CPU頻率是1.80！5.00ghz，整體主要取決於工作的負載。 3.相比較價位來說還是特別合適的，性價比很不錯，對於一些需要正常使用的伙伴來說非常的合適。 i9-12900H參數評測大全性能跑分
如何解決jQuery AJAX報錯403的問題？
Feb 23, 2024 pm 04:27 PM
如何解決jQueryAJAX報錯403的問題？在開發網頁應用程式時，經常會使用jQuery來發送非同步請求。然而，有時在使用jQueryAJAX時可能會遇到錯誤代碼403，表示伺服器禁止存取。這種情況通常是由伺服器端的安全性設定所導致的，但可以透過一些方法來解決這個問題。本文將介紹如何解決jQueryAJAX報錯403的問題，並提供具體的程式碼範例。一、使
