jquery jQuery-File-Upload

 

要的js一个都不能少，他们之间是有依赖关系的。

jquery-1.8.2.min.js
jquery.ui.core.js
jquery.ui.widget.js
jquery.fileupload.js
jquery.iframe-transport.js
jquery.fileupload-process.js
jquery.fileupload-validate.js
（最后2个js是有依赖的，缺少的话acceptFileTypes，maxFileSize 不会进行验证）

 

 

<script>  
    $(function () {  
      
        uploadImageAjaxDelete = function (url,obj){  
            $.ajax({url:url,async:false,dataType:"text",success:function(data){  
                  if(data=='1'){  
                       //如果删除成功，恢复file的使用，同时是图片渐变消失  
                      $(obj).parent().children("input[type='file']").removeAttr("disabled");  
                      $(obj).parent().children("img").fadeOut("slow",function(){  
                            $(this).add($(obj).parent().children("a")).add($(obj).parent().children("input:hidden")).add($(obj).parent().children("br")).remove();  
                      });    
                  }else{  
                      alert('图片删除失败！');  
                  }  
            }});  
        }  
      
        $("input[type='file']").fileupload({  
            url: 'image_ajax_save.action',  
            dataType: 'json',  
            autoUpload: true,  
            acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,  
            maxFileSize: 2097152// 2 MB  
        }).on('fileuploadadd', function (e, data) {  
              $(this).parent().children("label").remove();  
               $("<p class='uploadImgLoad'>上传中... 0%</p>").appendTo($(this).parent());  
              $(this).attr("disabled",true);  
        }).on('fileuploadprocessalways', function (e, data) {  
            if(data.files.error){  
               $(this).parent().children("p").remove();  
               $(this).removeAttr("disabled");  
               if(data.files[0].error=='acceptFileTypes'){  
                   $(this).parent().append("<label class='error'>图片类型错误</label>");  
               }  
               if(data.files[0].error=='maxFileSize'){  
                  $(this).parent().append("<label class='error'>图片不能大于2M</label>");  
               }    
            }   
        }).on('fileuploadprogressall', function (e, data) {  
            var $p = $(this).parent().children("p");  
            var progress = parseInt(data.loaded / data.total * 100, 10);  
            if($p.length==0){  
                $("<p class='uploadImgLoad'>上传中... "+progress+"%</p>").appendTo($(this).parent());  
            }else{  
               console.info(progress);  
               $p.text('上传中... '+progress+'%');  
               if(progress==100){  
                  $p.fadeOut("slow",function(){  
                     $(this).remove();  
                  });  
               }  
            }   
        }).on('fileuploaddone', function (e, data) {  
              if(data.result.result=='error'){  
                 $(this).removeAttr("disabled");  
                 alert('抱歉，上传过快，请稍等！');  
              }else if(data.result.result=='success'){  
                $(this).parent().prepend($("<a href='#' >  删除</a>").attr("onclick","uploadImageAjaxDelete('image_ajax_delete.action?dbFileName="+data.result.dbFileName+"',this)").add("<br/>"))  
                .prepend($("<img  width='140' height='90' border='0' />").attr("src",data.result.url))  
                .prepend($("<input type='hidden' name="+data.result.hiddenName+" id="+data.result.hiddenName+" value='"+data.result.dbFileName+"' />"));  
              }  
        });  
          
      
    });  
      
    </script>

 

操作的时候一定查看：API,Demo
https://github.com/blueimp/jQuery-File-Upload/wiki/API
http://blueimp.github.io/jQuery-File-Upload/basic.html

此外 fireFox 的 debug插件配合使用，有脚本输出的断点功能，以及console.info的显示。

 

@RequestMapping("/analyzeDependency")
    @ResponseBody
    public void importTables(@RequestParam MultipartFile file, String dbID) throws  Exception {
        try {
            InputStream in = file.getInputStream();
            try {
                ZipInputStream zipIn = new ZipInputStream(in);
                try {
                    DependencyAnalyzer.analyze(zipIn);
                } finally {
                    zipIn.close();
                }
            } finally {
                in.close();
            }

        } catch (Exception e) {
            
        }
    }

public class DependencyAnalyzer {

    public static void analyze(ZipInputStream zipIn) throws Exception {
        String tmpDir = System.getProperty("java.io.tmpdir")  + File.separator + UUID.randomUUID().toString();
        File tmpDirFile = new File(tmpDir);
        if (!tmpDirFile.getParentFile().canWrite()) {
            tmpDirFile.getParentFile().setWritable(true);
        }
        tmpDirFile.mkdirs();

        Map<String, List<String>> tableInfoMap = new HashMap<String, List<String>>();
        ZipEntry entry = null ; // 每一个压缩实体
        File outFile = null;// 定义输出的文件对象
        while((entry = zipIn.getNextEntry())!=null){ // 得到一个压缩实体
            String name = entry.getName();
            String entryFilePath = tmpDir + File.separator + name;
            outFile = new File(entryFilePath);

            if (!outFile.getParentFile().exists()) {  // 判断文件夹是否存在
                outFile.getParentFile().mkdirs();     // 创建文件夹
            }

            if (!outFile.exists()) {                // 判断文件是否存在
                outFile.createNewFile();            // 不存在则创建新文件
            }

            int b;
            FileOutputStream out = new FileOutputStream(outFile);
            try {
                while ((b = zipIn.read()) != -1) {
                    out.write(b);
                }
            } finally {
                out.close();
            }
        }
    }

}