jquery.upload.js實現非同步上傳程式碼例項

antzone發表於2017-03-23

現在非同步上傳使用非常的頻繁,下面是一段結合jquery,upload實現的非同步上傳和大家分享一樣,當然在本網站的環境下無法測試效果,需要的朋友可以自行在本地測試,程式碼例項如下:

一.上傳頁面:

當然要引入相關的jquery檔案和jquery.upload.js檔案。

javascript程式碼:

[JavaScript] 純文字檢視 複製程式碼
/*檔案上傳*/
function doUpload() {
  // 上傳方法
  $.upload({
    // 上傳地址
    url:window.basePath+'/reply/imageUpload', 
    // 檔案域名字
    fileName: 'uploadfile', 
    // 其他表單資料
    params: {},
    // 上傳完成後, 返回json, text
    dataType: 'json',
    // 上傳之前回撥,return true表示可繼續上傳
    onSend: function() {
      return true;
    },
    onSubmit: function(){
    },
    // 上傳之後回撥
    onComplate: function(data) {
      if(data.msg){
      }
      else{
        alert("上傳圖片出錯!");
      }
    }
  });
}

二.後臺程式碼:

[C#] 純文字檢視 複製程式碼
/**
* 圖片上傳本地伺服器
* @param request
* @param response
* @return
*/
@RequestMapping(value="imageUpload")
@ResponseBody
public Object imageUpload(HttpServletRequest request,HttpServletResponse response){
  Map<String, Object> map=new HashMap<String, Object>();
  UploadUtil uploadUtil = new UploadUtil();
  try {
    String url = uploadUtil.excelUpload(request, response);// 檔案上傳
  } 
  catch (IOException e) {
    e.printStackTrace();
  }
  return map;
}

相關文章