ajaxfileupload文件上传插件,解决再次提交文件流置空的问题
2017-08-24 10:07
776 查看
1、在ajaxfilesupload.js文件中,修改如下代码:
2、上传代码展示:
<script type="text/javascript"src="<%=path %>/js/upload/ajaxfilesupload.js"></script>
Html代码:
<inputtype='file' id='file' name='file' runat='server' accept='image/png,image/gif,image/jpg,image/jpeg' capture='camera'onchange='handleFiles(this)'/>
Js代码:
多文件上传需获取所有file的id:
vararrId = [];
$("input[name='fileupload']").each(function(){
arrId.push($(this).attr("id"));
});
$.ajaxFileUpload({
url :path+'/person/editheadpic.do',
secureuri : false,//安全协议
fileElementId:,//id 'file'/arrId
dataType:'text',
type : 'POST',
success : function(data, status) {
varjson = "";
var ua = navigator.userAgent.toLowerCase();
if(ua.indexOf('ucbrowser') > -1&& ua.match('android')){
json =data.substring(data.lastIndexOf(">")+4);
json = eval('(' + json +')');
}else {
json =jQuery.parseJSON(jQuery(data).text());
}
//返回结果的相应操作
}
});
Java代码:
//单文件上传上传文件
MultipartHttpServletRequest multipartRequest= (MultipartHttpServletRequest) req;
MultipartFile file =multipartRequest.getFile("file");
if (file.getSize() > 0)
{
// 文件名称
String fileName =file.getOriginalFilename();
// 本地存储路径
SimpleDateFormat sdf =new SimpleDateFormat("yyyyMMdd");
SimpleDateFormat sdf2 = newSimpleDateFormat("HHmmssSSS");
String dateStr =sdf2.format(new Date());
String path =req.getSession().getServletContext().getRealPath("") + File.separator+ "wap"
+ File.separator+ "user" + File.separator + sdf.format(new Date()) + File.separator;
File pathfile = newFile(path);
// 如果文件目录不存在,则新建
if (!pathfile.exists()&& !pathfile.isDirectory())
{
pathfile.mkdirs();
}
// 先存入本地
String fpath = path +dateStr + fileName.substring(fileName.lastIndexOf("."));
File newFile = newFile(fpath);
if (!newFile.exists())
{
newFile.createNewFile();
}
// 上传文件
FileOutputStreamoutputStream = new FileOutputStream(newFile);
FileCopyUtils.copy(file.getInputStream(), outputStream);
// 指定对应模块的文件夹
Map<String, String>param = new HashMap<String, String>();
param.put("fileTypeName", "center");
// 上传图片后的图片地址
String picUrl =UploadUtil.uploadFile(fpath, "img", req, param);
//多文件上传
// 转型为MultipartHttpRequest(重点的所在)
MultipartHttpServletRequestmultipartRequest = (MultipartHttpServletRequest) req;
try
{
// 循环上传图片
for (Iterator<String> it =multipartRequest.getFileNames(); it.hasNext();)
{
String key = it.next();
MultipartFile file =multipartRequest.getFile(key);
if(file.getOriginalFilename().length() > 0)
{
// 文件名称
String fileName =file.getOriginalFilename();
// 先存入本地
String fpath = path +sdf2.format(nowDate) + key +fileName.substring(fileName.lastIndexOf("."));
File newFile = new File(fpath);
if (!newFile.exists())
{
newFile.createNewFile();
}
FileOutputStreamoutputStream = new FileOutputStream(newFile);
FileCopyUtils.copy(file.getInputStream(), outputStream);
// 指定对应模块的文件夹
Map<String, String>param = new HashMap<String, String>();
param.put("fileTypeName", "return");
// 上传图片后的图片地址
String picUrl =UploadUtil.uploadFile(fpath, "img", req, param);
if(!StringTools.isNullOrEmpty(picUrl))
{
affixurl +="," + picUrl;
}
}
}
}
catch (IOException e)
{
logger.error("上传文件流异常",e);
}
// 判断非空,截取第一逗号
if(!StringTools.isNullOrEmpty(affixurl))
{
affixurl = affixurl.substring(1);
}
2、上传代码展示:
<script type="text/javascript"src="<%=path %>/js/upload/ajaxfilesupload.js"></script>
Html代码:
<inputtype='file' id='file' name='file' runat='server' accept='image/png,image/gif,image/jpg,image/jpeg' capture='camera'onchange='handleFiles(this)'/>
Js代码:
多文件上传需获取所有file的id:
vararrId = [];
$("input[name='fileupload']").each(function(){
arrId.push($(this).attr("id"));
});
$.ajaxFileUpload({
url :path+'/person/editheadpic.do',
secureuri : false,//安全协议
fileElementId:,//id 'file'/arrId
dataType:'text',
type : 'POST',
success : function(data, status) {
varjson = "";
var ua = navigator.userAgent.toLowerCase();
if(ua.indexOf('ucbrowser') > -1&& ua.match('android')){
json =data.substring(data.lastIndexOf(">")+4);
json = eval('(' + json +')');
}else {
json =jQuery.parseJSON(jQuery(data).text());
}
//返回结果的相应操作
}
});
Java代码:
//单文件上传上传文件
MultipartHttpServletRequest multipartRequest= (MultipartHttpServletRequest) req;
MultipartFile file =multipartRequest.getFile("file");
if (file.getSize() > 0)
{
// 文件名称
String fileName =file.getOriginalFilename();
// 本地存储路径
SimpleDateFormat sdf =new SimpleDateFormat("yyyyMMdd");
SimpleDateFormat sdf2 = newSimpleDateFormat("HHmmssSSS");
String dateStr =sdf2.format(new Date());
String path =req.getSession().getServletContext().getRealPath("") + File.separator+ "wap"
+ File.separator+ "user" + File.separator + sdf.format(new Date()) + File.separator;
File pathfile = newFile(path);
// 如果文件目录不存在,则新建
if (!pathfile.exists()&& !pathfile.isDirectory())
{
pathfile.mkdirs();
}
// 先存入本地
String fpath = path +dateStr + fileName.substring(fileName.lastIndexOf("."));
File newFile = newFile(fpath);
if (!newFile.exists())
{
newFile.createNewFile();
}
// 上传文件
FileOutputStreamoutputStream = new FileOutputStream(newFile);
FileCopyUtils.copy(file.getInputStream(), outputStream);
// 指定对应模块的文件夹
Map<String, String>param = new HashMap<String, String>();
param.put("fileTypeName", "center");
// 上传图片后的图片地址
String picUrl =UploadUtil.uploadFile(fpath, "img", req, param);
//多文件上传
// 转型为MultipartHttpRequest(重点的所在)
MultipartHttpServletRequestmultipartRequest = (MultipartHttpServletRequest) req;
try
{
// 循环上传图片
for (Iterator<String> it =multipartRequest.getFileNames(); it.hasNext();)
{
String key = it.next();
MultipartFile file =multipartRequest.getFile(key);
if(file.getOriginalFilename().length() > 0)
{
// 文件名称
String fileName =file.getOriginalFilename();
// 先存入本地
String fpath = path +sdf2.format(nowDate) + key +fileName.substring(fileName.lastIndexOf("."));
File newFile = new File(fpath);
if (!newFile.exists())
{
newFile.createNewFile();
}
FileOutputStreamoutputStream = new FileOutputStream(newFile);
FileCopyUtils.copy(file.getInputStream(), outputStream);
// 指定对应模块的文件夹
Map<String, String>param = new HashMap<String, String>();
param.put("fileTypeName", "return");
// 上传图片后的图片地址
String picUrl =UploadUtil.uploadFile(fpath, "img", req, param);
if(!StringTools.isNullOrEmpty(picUrl))
{
affixurl +="," + picUrl;
}
}
}
}
catch (IOException e)
{
logger.error("上传文件流异常",e);
}
// 判断非空,截取第一逗号
if(!StringTools.isNullOrEmpty(affixurl))
{
affixurl = affixurl.substring(1);
}
相关文章推荐
- jquery 文件上传插件ajaxfileupload.js 实现多图上传,解决文件上传后表单置空的问题
- 表单包含file上传文件提交,使用ajaxSubmint或者ajaxForm 遇到的问题以及解决方法
- 带文件上传的form表单提交, jquery的ajaxfileupload+插件dropzone图文详解
- jQuery的ajaxFileUpload上传文件插件刷新一次才能再次调用触发change
- spring mvc 下使用ajaxfileupload.js 异步上传文件 并返回信息 各种问题解决
- jQuery插件之ajaxFileUpload(异步上传图片并实时显示,并解决onchange后ajaxFileUpload失效问题)
- ajaxFileUpload 上传文件/图片,传参数,解决第二次无法上传问题
- 解决在Safari、IE高版本中采用自定义选择文件按钮ajaxFileUpload不能上传问题
- 解决网页异步上传图片时不断更换预览图片时数据库累积文件问题与ajaxUploadFile上传多个参数问题
- jQuery插件之ajaxFileUpload(异步上传图片并实时显示,并解决onchange后ajaxFileUpload失效问题)
- jQuery的ajaxFileUpload上传文件插件刷新一次才能再次调用触发change
- jQuery 文件上传插件ajaxFileUpload使用以及onchange问题
- sql server 关于表中只增标识问题 C# 实现自动化打开和关闭可执行文件(或 关闭停止与系统交互的可执行文件) ajaxfileupload插件上传图片功能,用MVC和aspx做后台各写了一个案例 将小写阿拉伯数字转换成大写的汉字, C# WinForm 中英文实现, 国际化实现的简单方法 ASP.NET Core 2 学习笔记(六)ASP.NET Core 2 学习笔记(三)
- 使用ajaxfileupload.js进行文件上传,出现的问题以及解决办法
- 后台使用Spring MVC 4.15 版本 通过 ajaxFileUpload plugin插件上传文件相应时引起的一个小问题,Chrome、Firefox中出现SyntaxError:unexpected token <
- file文件添加change事件,结合ajaxFileUpload使用文件上传只生效一次问题解决
- ajaxfileupload_v.js 解决js版本不兼容,多文件上传不解析json的问题
- 解决ajaxfileupload上传文件在IE浏览器返回data为空问题
- jQuery插件之ajaxFileUpload(异步上传图片并实时显示,并解决onchange后ajaxFileUpload失效问题)
- 解决ajaxfileupload二次上传文件问题