国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

使用 ajaxFileUpload 進行圖片上傳

tomlingtm / 1885人閱讀

摘要:前端部分使用主要是為了異步上傳文件,不需要開啟新的頁面進行上傳由于不能上傳文件,該文件的代碼在本篇文章的最底部由于這個文件已經很久沒用更新了,所以增加了來處理錯誤,前端代碼如下第一個中的屬性是為了限制上傳的文件屬性,其他文件可以去掉該屬性引

前端部分

使用ajaxFileUpload 主要是為了異步上傳文件,不需要開啟新的頁面進行上傳!
由于segmentfault不能上傳文件,該文件ajaxFileUpload.js的代碼在本篇文章的最底部:
由于ajaxFileUpload這個文件已經很久沒用更新了,所以增加了handleError: function( s, xhr, status, e )來處理錯誤,

前端代碼如下:
第一個input中的accept屬性是為了限制上傳的文件屬性,其他文件可以去掉該屬性

引用兩個js文件

 
 

上傳按鈕:


js代碼:

    //圖片上傳
    function ajaxFileUpload()
    {
         
        $.ajaxFileUpload({
                url:"/ai/app/uploadImage",//用于文件上傳的服務器端請求地址
                secureuri:false ,//一般設置為false
                fileElementId:"upload",//文件上傳控件的id屬性  
                dataType: "text",//返回值類型 一般設置為json
                success: function (message)  //服務器成功響應處理函數
                {
                    layer.alert(message);
                    $("#tool_icon").val(message);
                },
                error: function (data, status, e)//服務器響應失敗處理函數
                {
                    alert(e);
                }
            });
        return false;
    }
后端部分

該項目使用的spring框架,需要配置bean,來接受上傳的文件

  
      
          
    

后端代碼

@ResponseBody
    @RequestMapping(value="/uploadImage",method=RequestMethod.POST)
    public String uploadImage(HttpServletRequest request,@RequestParam("imagefile") MultipartFile file) throws IOException{
       String getOriginalFilename = null;
       logger.debug("文件原名: " + getOriginalFilename);
       logger.debug("文件名稱: " + file.getName());
       logger.debug("文件長度: " + file.getSize());
       logger.debug("文件類型: " + file.getContentType());
       if( file.isEmpty()){
          logger.error("upload image--------------------------------->failed");
          return "please select a image";
       }
       /**文件在服務器中的實際路徑*/
      
       String realPath = request.getSession().getServletContext().getRealPath("/upload");  
       logger.debug("realPath---------------------------------------->"+realPath);
       logger.debug("getOriginalFilename----------------------------->"+file.getOriginalFilename());
       
       /**寫入地址中*/
       FileUtils.copyInputStreamToFile(file.getInputStream(), new File(realPath,file.getOriginalFilename()));
       
       /**使用原生方法*/
       /* byte[] bytes = file.getBytes();
       BufferedOutputStream stream = new BufferedOutputStream(new FileOutputStream(new File("/ai/images/icons/toolLogo/demo.png")));
       stream.write(bytes);
       stream.close();*/
       /**返回文件在服務器中的地址,用于存儲入庫*/
       
       String resultUrl = "/ai/upload/"+file.getOriginalFilename();
       logger.debug("upload image file result----------------------->"+resultUrl);
       return resultUrl;
    }

相關jar包下載:org.apache.commons.io_1.3.2.jar org.apache.commons.fileupload.jar
相關jar包的地址
參考blog:
jQuery插件之ajaxFileUpload
http://blessht.iteye.com/blog/1405057
http://blog.csdn.net/jadyer/article/details/11693705
http://www.cnblogs.com/rollenholt/p/3693087.html

ajaxFileUpload.js 源代碼

// JavaScript Document
jQuery.extend({

    createUploadIframe: function(id, uri)
 {
   //create frame
            var frameId = "jUploadFrame" + id;
            
            if(window.ActiveXObject) {
                var io = document.createElement("