ajaxfileupload.js_ajax file up load_ajaxfileupload多文件

使用iquery的插件ajaxFileUpload.js实现文件的异步上传。后台为java

1.在页面中引入jquery.js和ajaxFileUpload.js,切记jquery.js要在ajaxFileUpload.js之前。ajaxfileupload.js

2. html页面代码

<div id="wait_loading" style="display:none;">
    <div style="width:103px;margin: 0 auto;padding-top:200px;"><img src="<%=path %>/images/loading.gif"/></div>
</div>
<div id="edit_div">
     <div class="edit_content">
		  <div class="current_pos">
			  <span style="margin-left:20px;font-size: 15px; font-weight: bold;color:#eee;">上传检测文件</span>
			  <div class="close_icon">
				<a href="#" onClick="closeDiv()">
					<i class="glyphicon glyphicon-remove"></i>
				</a>
			 </div>
		</div>
		 <div class="main_upload col-md-12" >
		    <span class="col-md-3">选择上传文件：</span>
		    <div class="col-md-7 file_input"><input type="file" id="upload_file" name="upload_file" /></div>
		    <input  type="button" value="上传" onclick="commit()"/>
		 </div>
    </div>
</div>

function closeDiv(){
	document.getElementById("edit_div").style.display="none";
}	
function showDiv(){
	document.getElementById("edit_div").style.display="block";
}
function commit(){
    document.getElementById("edit_div").style.display="none";
    $("#wait_loading").ajaxStart(function() {
        $(this).show();
    // 文件上传完成将div隐藏起来
    }).ajaxComplete(function() {
        $(this).hide();
    });
    //console.log("uploading");
    
    if ($("#upload_file").val().length > 0) {
        ajaxFileUpload();
    }
    else {
         alert("请选择要上传的文件！！");
         document.getElementById("edit_div").style.display="block";
    }	  
}	
function ajaxFileUpload(){   
   $.ajaxFileUpload({
        url:"<%=basePath%>FileUploadServlet", 
        type: "post",
        secureuri: false, //一般设置为false
        fileElementId: upload_file, // 上传文件的id、name属性名   
        success: function(data, status){  
            alert("上传成功！");  
            location.reload();
        },
        error: function(data, status, e){ 
            alert(e);
        }
    });	
}

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/ruanjian/article-52003-1.html