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)