- 前端页面上传代码
- 最简代码
<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源码
- 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
- buttonImage+button_image_url,修改uploadify.js,当没有提供按钮图片时不去请求根路径/
- 错误处理
- 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>
- uploadError: HTTP ERROR : File ID: SWFUpload_0_0. HTTP Status: 406.
- 最简代码
- 后端请求处理
- 样例
@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);
@Testpublic 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"));}
- 样例,需要引用httpmime模块,org.apache.httpcomponents:httpmime:4.3.4
转载于:https://www.cnblogs.com/xingqi/p/3929536.html