文件上傳：
記得前一段時(shí)間，為了研究Ajax文件上傳，找了很多資料，在網(wǎng)上看到的大部分是form表單的方式提交文件，對(duì)于Ajax方式提交文件并且也要提交表單中其他數(shù)據(jù)，發(fā)現(xiàn)提及的并不是很多，后來在同事的幫助下，使用ajaxfileupload最終完成了文件上傳與其他提交的操作，現(xiàn)在分享給大家，希望大家能有有所幫助。
操作步驟：
1 導(dǎo)入jar包：
我們?cè)谑褂梦募蟼鲿r(shí)，需要使用到兩個(gè)jar包，分別是commons-io與commons-fileupload，在這里我使用的兩個(gè)版本分別是2.4與1.3.1版本的，需要使用JS文件與jar包最后會(huì)發(fā)給大家一個(gè)連接（如何失效請(qǐng)直接我給留言，我會(huì)及時(shí)更改，謝謝）。
2 修改配置文件：
當(dāng)我們導(dǎo)入的jar包是不夠的，我們需要使用到這些jar包，由于我當(dāng)時(shí)使用的是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文件：
大家對(duì)form表單提交問價(jià)的方式很熟悉，但是我們有很多情況下并不能直接使用form表單方式直接提交。這時(shí)候我們就需要使用Ajax方式提交，Ajax有很多的好處，比如當(dāng)我們不需要刷新頁面獲希望進(jìn)行局部刷新的時(shí)候，我們就可以使用Ajax。下面是我的表單提交的JSP頁面，其中包含JS的詳細(xì)步驟和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>發(fā)布資訊</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,//是否需要安全協(xié)議 fileElementId : 'file', type : 'POST', //文件提交的方式 dataType : 'string', cache : false, //是否進(jìn)行頁面緩存 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("系統(tǒng)錯(cuò)誤"); fnError2(); } } }); } }); } </script></head><body class="body_bg"><div class="main"> <!--頁面主體 start--> <div class="main_content"> <div class="later_index clear wrap"> <div class="later_right fr"> <div class="roll_parent" id="roll_parent"> <div class="scroll_parent" id="scroll_parent"> <div class="scroll" id="scroll"></div> </div> <div class="roll_son" id="roll_son"> <div class="later_content later_content1"> <div class="release_name"> <h3> <span>發(fā)布資訊</span> </h3> </div> <div class="issue_content"> <form action="" id="form1" method="post" enctype="multipart/form-data"> <table class="issue_tab"> <tbody> <tr> <td><p><i>*</i><strong>標(biāo)題</strong></p> </td> </tr> <tr> <td><input id="title_input_info" name="title_input_info" type="text" placeholder="最多可以輸入40個(gè)字" type="text" maxlength="40"/> <!-- <span class="colse"></span> --> <p class="colse_tip"></p> <!-- <p class="colse_tip" id="title_p_info" style="display:hidden;">請(qǐng)選擇標(biāo)題！</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個(gè)字" type="text" maxlength="100" /> <p class="colse_tip"></p></td> </tr> <tr> <td><p><i>*</i><strong>內(nèi)容</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>選擇行業(yè)</strong></p> <p class="colse_tip" id="type_p_info" style="display:hidden;">請(qǐng)選擇行業(yè)！</p></td> </tr> <tr> <td> <div class="next_select select_width select_bg" id="next_select0"> <span id="type_span_info">請(qǐng)選擇</span> </div> <div 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">生物醫(yī)藥</li> <li data-id="5">電子信息</li> <li data-id="6">其他</li> </ul> </div> </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> </div> <div class="financial_pro_icon"> <div class="financial_pro_icon_l issue_btn1"> <a href="javaScript:save();">發(fā)布</a> </div> <div class="financial_pro_icon_r issue_btn1"> <a href="${ctx}/info/gotoInfo?index=2">取消</a> </div> </div> </div> </div> </div> </div> </div> </div> <!--頁面主體 end--></div></body></html>
新聞熱點(diǎn)
疑難解答
圖片精選
