uploadify文件上传

• 前端页面上传代码
• 最简代码
  
  <script type="text/javascript" src="/jquery-1.11.1/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="/uploadify-3.2.1/uploadify.css" />
  <script type="text/javascript" src="/uploadify-3.2.1/jquery.uploadify.min.js"></script>  
  
  <script type="text/javascript">
      $(function() {
          var options = {
                  "swf"      : "/uploadify-3.2.1/uploadify.swf",//flash地址
                  "uploader"      : "/upload",//上传请求处理地址
                  "fileObjName" : "file",//文件对象名
                  "fileSizeLimit": 2048,//2M，文件大小限制
                  "fileTypeExts":"*.png;*.jpg;*.pdf;*.jpeg",//文件类型限制，分号分隔
                  "formData":{type:"image"},//传入表单参数
                  "successTimeout" : 90,//超时设置
          };
         $("#file_upload1").uploadify($.extend(options, {//多个上传按钮时用options提供公用配置
                  "formData":{type:"image"}, //这里提供特定配置（这会改变options，是个对后面的uploadify调用不友好的副作用）
              onUploadSuccess:function(file, data, response){//data可以是字符串domain+path，不支持json返回格式
                  var paths = data.split(",");//数据库存相对路径path，访问时拼接domain+path即可
                  $("#path1").val(paths[1]).next("a").attr("href",paths[0]+paths[1]).text(file.name);
              }
          }));
      });    
  </script>  
  <input type="file" name="file1" id="file_upload1" />  
  
• 简单封装，
  <script src="$static_url/admin/js/uploadify-3.2.1/uploadify.settings.js"></script>  
  
  var static_url = "/resources";//修改js需要用到的资源和上传路径
  var upload = "http://114.215.183.178:8090";  
  var settings = {
      swf : static_url+"/admin/js/uploadify-3.2.1/uploadify.swf",
      cancelImg : static_url+"/admin/js/uploadify-3.2.1/uploadify-cancel.png",
      buttonText : "选择文件...",
      uploader : upload+"/upload/temp",
      formData : {type : "image" },
      fileObjName : "file",
      fileTypeExts : "*.png;*.jpg;*.jpeg",
      fileTypeDesc : "图片文件",
      fileSizeLimit : 2048,
      successTimeout : 90
  };
  /**
   * @param fileInputId <input type="file" id="fileInputId"/>
   * @param pathInputId <input id="pathInputId"/>
   */
  function uploadify(fileInputId, pathInputId){
      $(fileInputId).uploadify(jQuery.extend(settings, {
          onUploadSuccess:function(file, data, response){
              var paths = data.split(",");
              $(pathInputId).val(paths[1]).next("a").attr("href",paths[0]+paths[1]).text("预览");
          }
      }));
  }  
  uploadify("#idFrontCopyFile", "#idFrontCopy"); //这里的id与上传按钮html对应 
  
  <div class="button-all">
      <div class="button-left">
          <input id="idFrontCopy" name="idFrontCopy" class="Mtext1-1" readonly /><a href="" target="_blank"></a>
      </div>
      <div class="button-right">
          <input id="idFrontCopyFile" type="file" name="idFrontCopyFile" />
      </div>
  </div>   
  
• 参数详解
  
• onUploadSuccess，参数格式参考uploadify.js源码
  
• 资源访问：
  
• buttonImage+button_image_url，修改uploadify.js，当没有提供按钮图片时不去请求根路径/
  this.settings.button_image_url = this.settings.button_image_url ? SWFUpload.completeURL(this.settings.button_image_url) : this.settings.button_image_url
  
• uploadify-cancel.png，修改uploadify.css，
  
  .uploadify-queue-item .cancel a {
      background: url('uploadify-cancel.png') 0 0 no-repeat  
  
• 错误处理
  
• uploadError: HTTP ERROR : File ID: SWFUpload_0_0. HTTP Status: 406.
  当button_image_url找不到时报错406
  上传文件后可以返回1，或path字符串，不支持json串（需要返回表示上传成功的东西，否则uploadify会认为上传失败）
  
• uploadError : IO Error : File ID: SWFUpload_0_0. IO Error: Error #2038
  可能是fileObjName对不上，或返回结果不正确
  可能是host没有对应，比如localhost访问外网ip的uploadify.swf，这时需要在外网的根路径下提供权限文件http://host/crossdomain.xml
  
  <?xml version="1.0"?>
  <!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
  <cross-domain-policy>
    <allow-access-from domain="*" />
  </cross-domain-policy>  
  
• 后端请求处理
• 样例
  
  @RequestMapping("")
  public Object upload(@RequestParam String type, MultipartFile file) {
      String path = path(type, file.getOriginalFilename());
      File target = new File(props.getProperty("uploads"), path);
      boolean save = save(target, file);
      if(save) {
          return string(props.getProperty("uploads_domain")+","+path);
      }
      return null;//返回null表示上传失败
  }  
  
  private String string(String string) {//处理uploadify得到结果路径中乱码问题
      return StringUtils.newStringIso8859_1(StringUtils.getBytesUtf8(string));
  }  
  
• 代码上传文件
• 样例，需要引用httpmime模块，org.apache.httpcomponents:httpmime:4.3.4
  
  private HttpClient client = HttpClients.createDefault();
  private String testFile = "E:/系统默认形象1.0_161.png";
  private static ContentType textUtf8 = ContentType.create("text/plain", Consts.UTF_8);  
  
  @Test
  public void upload() throws ClientProtocolException, IOException {
      HttpEntity entity = MultipartEntityBuilder.create()
              .setMode(HttpMultipartMode.RFC6532)//BROWSER_COMPATIBLE自定义charset，RFC6532=utf-8，STRICT=iso-8859-1
              .addTextBody("name", testFile, textUtf8)//中文文件名还是需要传utf-8编码
              .addBinaryBody("file", new File(testFile))
              .build();
      HttpUriRequest post = RequestBuilder.post()
              .setUri("http://localhost:8080/upload")
              .setEntity(entity).build();
      HttpResponse response = client.execute(post);
      System.out.println(response.getStatusLine().getStatusCode() + " => " + IOUtils.toString(response.getEntity().getContent(), "utf-8"));
  }  
  

来自为知笔记(Wiz)