Question

jquery-file-upload插件的问题。修改data。

因为要做一个比较复杂的表单，有两个图片域，还有是几个文本域。两个图片域都是多文件的。想请教下怎么去手动修改data，最好有这个data的文档说明。有链接的话也可以～
两个图片域都是多图片上传，想一次请求把这些数据发送过去。现在卡在了jquery-file-upload这个插件如何把所有input都放在一次请求
（通过一个data）发送到后台。另外，后台node。。。您写的那个java能看懂的大概，前端回调后台收到数据来进行预览及最终的一次上传。因为做的
这个是内网的一个网站，希望用最快的速度去处理这些，所以就没有写前端回调这些。不知道这个能实现么？

Answer 1

jquery异步上传，一般来说这里上传调用的是系统专门上传的action，上传好后返回上传文件信息。你这里result.files就是返回的上传结果。这个需要你在后台自己封装。你前端需要什么，后台就封装什么。

比如我以前写过一个

Map<String, Object> fileObject = new HashMap<String, Object>();
fileinfo.put("size", size);//原始文件大小
fileObject.put("original", original);//原始文件唯一标识
fileObject.put("originalPath", originalPath);//原始文件临时存储目录
fileObject.put("thumb", thumb);//图片的预览文件唯一标识
fileObject.put("thumbPath", thumbPath);//图片预览文件临时存储目录
fileObject.put("name", fileFileName);//原始图片名称
fileObject.put("url", url);//原始图片的web查看地址,这个可以设置img.src属性
fileObject.put("thumbnailUrl", thumbnailUrl);//预览图片的web查看地址
fileObject.put("contentType", fileContentType);//上传文件type
fileObject.put("deleteType", "POST");//这是我自己封装的post删除
//这个是我自己封装的删除路径
fileObject.put("deleteUrl", super.getRequest().getContextPath() + "/removeUpload.do?id=" + original);
Map[] fileArray = new HashMap[1];
fileArray[0] = fileObject;
JSONObject jsonObject = new JSONObject();
jsonObject.put("files", JSONArray.fromObject(fileArray));
HttpServletResponse response = getResponse();
response.setContentType("application/json;charset=UTF-8");
response.getWriter().write(jsonObject.toString());
response.getWriter().flush();

而前断可以将上传文件的唯一标识放到一个隐藏域里，表单提交的时候一起提发送到后台，再根据唯一标识去取上传文件信息或写或复制转移。

前断fileuploaddone我是这么用的

on('fileuploaddone', function(e , data){
    //上传结果
    $.each(data.result.files, function(index , file){
        if (file.url) {
            var link = $('<a>').attr('target', '_blank').prop('href', file.url);
            //这个是文件上传后的展示区域，可以在fileuploadadd事件里构建
            var $imgdiv = $(data.context.children()[index]);
            var $link = $imgdiv.find("canvas").wrap(link);
            $imgdiv.append($('<input type="hidden" name="imagefileid"/>').prop('value', file.original));
            $imgdiv.append($('<input type="hidden" name="imagefilename"/>').prop('value', file.name));
        } else if (file.error) {
            var error = $('<span class="text-danger"/>').text(file.error);
            $(data.context.children()[index]).append(error);
        }
    });
})

追问

这是表单的视图  您看一下

下面还有文字：（在补充问题中）

追答

比起fileupload我更喜欢用plupload，虽然都差不多。

追问

啊，我这个表单设计有问题。您稍等，我把这个结构改了，然后看看用什么方法去做。
另外。。。原来每上传一次图片就会发送一次请求，所以我那么想（一次请求全部上传）是不太可能的。。。我去试试前端回调上传数据。要是没什么问题了就给您上分。

追答

像你这个实现应该是这样：①点“+” 选择图片后立即上传②后台上传到临时目录（一般大图还需要压缩处理，保留原始图片返回缩略图信息），并将图片有关的信息封装object，生成唯一标识fileid③将唯一标识和封装信息存入map，并将map绑定到用户session；④同时object封装到数组，作为json中files的值，返回到前端。⑤前端解析files,将object.fileid放到隐藏域，待表单提交的时一同发送到后台。⑥后台根据fileid从session的map获得上传文件的全部资料，并将它和压缩文件转移到正式的文件目录下存储，将新目录的路径与业务数据关联就OK。
不要最后提交表单时才上传，那样太慢了，会蛋疼死，而且如果有一个图片上传失败，要全部重来还是怎么着？

追问

嗯嗯 太感谢了。还是做的少，很多东西不知道应该怎么做。谢谢您指导～