前臺上傳檔案
阿新 • • 發佈:2019-01-04
一、使用ajaxFileUpload上傳
1、前臺請求
<script type="text/javascript" src="../jquery.min.js"/>
<script type="text/javascript" src="../ajaxfileupload.js"/>
<input type="file" id="file" name="file"/>
<button onclick="shangchuan();">上傳</button>
2、ajaxfileupload引數介紹
1、url 上傳處理程式地址。
2,fileElementId 需要上傳的檔案域的ID,即<input type="file">的ID。
3,secureuri 是否啟用安全提交,預設為false。
4,dataType 伺服器返回的資料型別。可以為xml,script,json,html。如果不填寫,jQuery會自動判斷。
5,success 提交成功後自動執行的處理函式,引數data就是伺服器返回的資料。
6,error 提交失敗自動執行的處理函式。
7,data 自定義引數。這個東西比較有用,當有資料是與上傳的圖片相關的時候,這個東西就要用到了。
8, type 當要提交自定義引數時,這個引數要設定成post
3、js程式碼
function shangchuan(){
$.ajaxfileupload({
url:"/aa",
secureuri:false,//是否需要安全協議,一般設定為false
fileElementId:'file',//檔案上傳域的ID
dataType:'json',
success:function(data){
},
error:function(data){
}
})
}
二、直接獲取file檔案
1、前臺請求
<input class="xz" type="file" id="gzb" onchange="user.uploadBtn ('gzb')" />
<span class="xzwj_b" id="uploadEventPath">工資發放表</span>
2、js程式碼
<script type="text/javascript"> var user; $(function(){ user = new User(); user.init(); }) var User = function(){ //初始化 this.init = function(){ $("#gzb").val(""); $("#gzb").bind("change",function(){ $("#uploadEventPath").attr("value",$("#gzb").val()); }) } //點選上傳按鈕 this.uploadBtn = function(id){ var uploadEventFile = $("#gzb").val(); if(uploadEventFile == ""){ alert("請選擇excel格式"); }else if(uploadEventFile.lastIndexOf(".xls") <0){ alert("只能上傳excel格式"); }else{ var url = "/*/*"; //var formData = new FormData($("form")[0]); //有form表單時 var formData = new FormData(); formData.append("file", $('#' + id).prop('files')[0]); user.sendAjaxRequest(url,'POST',formData); } this.sendAjaxRequest = function(url,type,data){ $.ajax({ url:url, data:data, type:type, success:function(result){ alert(result); }, error:function(){ alert("excel上傳失敗"); }, cache:false, contentType:false, processData:false }) } } } </script>