jQuery ajax 檔案上傳

       之前用的ajaxfileupload，但是感覺不太好用，今天前端檔案上傳出了點問題，索性午休時自己擴充了一個簡單的 jQuery ajax上傳檔案外掛程式，需要用到上傳功能的頁面，只需在jQuery引入後，引入該js檔案即可。由於使用了FormData，低版本IE不一定支援，我們是後台管理系統，都用的chrome，firefox和360等國產chrome核心的瀏覽器，所以不用考慮這個問題。

粘上代碼以記之：fileUpload.js

/** * jQuery上傳檔案擴充外掛程式 * 使用方法樣本(方括弧中為選擇性參數)： * $.fileUpload({ * url: ...,  // 檔案上傳地址 * file: "#uploadFile", // css選取器指定的待上傳檔案標籤 * [fileName:...], // 上傳至伺服器的檔案名稱 * [data:{id:1,user:"小明"}],  // 自訂一起上傳的參數 * [success: function(data){console.log(data)}]  // 上傳成功後的回呼函數 *    }); *  * 注意：本外掛程式IE9及以下不支援 *  * author: lixk * date: 2016/11/24  */var fileUpload = function(params){var file = $(params["file"]).get(0) || {}; //檔案對象var fileName = params["fileName"] || file.name;  //上傳至伺服器的檔案名稱，預設file的namevar fileContent = file.files[0] || {}; //檔案內容var url = params["url"];  //上傳地址var data = params["data"] || {}; //自訂參數var success = params["success"]; //上傳成功的回呼函數var formData = new FormData(); //建立上傳表單formData.append(fileName, fileContent);//向表單添加參數for(var key in data) {formData.append(key, data[key]);}//向伺服器發送表單資料$.ajax({url: url,type: "POST",data: formData,processData: false,  // 告訴jQuery不要去處理髮送的資料contentType: false,   // 告訴jQuery不要去設定Content-Type要求標頭success: function(data) { //請求成功，回調  if(success){  success(data);  }}});}//添加jQuery擴充jQuery.extend({fileUpload: fileUpload});

圖片上傳使用樣本：

$.fileUpload({url: uploadLogo_url,file: 'input[name="logoFile"]', //fileName:"logoFile",success: function(data){$("#logoImg").attr("src", data.imgPath); // 預覽圖片}});