使用ajaxfileupload.js列子
异步提交,无刷新上传,感觉还不错。如果再进行优化加上进度条更好了。我使用的是spring mvc
jsp页面
<script type="text/javascript">
function ajaxFileUpload()
{
$.ajaxFileUpload
({
url:basePath+'/manager/app/upload.json',
secureuri:false,
fileElementId:'fileToUpload',
dataType: 'json',
success: function (data, status)
{
$("#img").attr("src", '${pageContext.request.contextPath}'+data.message);
},
error: function (data, status, e)
{
alert(data.status);
alert(data.message+" error: "+e);
}
}
)
return false;
}
</script>
<td>
<img id="img" alt="" height="90" width="120" src="${pageContext.request.contextPath}/images/default.jpg"/>
<input type="file" name="fileToUpload" id="fileToUpload"/>
<button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">Upload</button>
</td>
后端代码
@ResponseBody
@RequestMapping("upload")
public JsonResult upload(HttpServletRequest request)
{
HttpSession session = request.getSession();
WebUserContext context = WebUserContext.get(session);
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
String pathDir = "/files/" + context.getUserId()+"/";
/**得到图片保存目录的真实路径**/
String logoRealPathDir = request.getSession().getServletContext().getRealPath(pathDir);
/**根据真实路径创建目录**/
File logoSaveFile = new File(logoRealPathDir);
if(!logoSaveFile.exists())
logoSaveFile.mkdirs();
/**页面控件的文件流**/
MultipartFile multipartFile = multipartRequest.getFile("fileToUpload");
/**获取文件的后缀**/
System.out.println(multipartFile.getOriginalFilename());
String suffix = multipartFile.getOriginalFilename().substring
(multipartFile.getOriginalFilename().lastIndexOf("."));
/**拼成完整的文件保存路径加文件**/
String name = + System.currentTimeMillis()+suffix;
String fileName = logoRealPathDir + File.separator+name;
File file = new File(fileName);
String data = file.getPath();
try {
multipartFile.transferTo(file);
} catch (IllegalStateException e) {
e.printStackTrace();
JsonResult.error("-1");
} catch (IOException e) {
e.printStackTrace();
JsonResult.error("-1");
}
System.out.println(pathDir+name);
return JsonResult.ok(pathDir+name);//直接返回string 也可以
}
使用的时候注意几点
1.使用的时候如果选择数据类型是json 的改下ajaxfileload.js 的
uploadHttpData方法,因为他默认给多出<pre>烦人的标签。
if ( type == "json" )
data = r.responseText;
var start = data.indexOf(">");
if(start != -1) {
var end = data.indexOf("<", start + 1);
if(end != -1) {
data = data.substring(start + 1, end);
}
}
eval( "data = " + data );
2.上传完成后注意路径,正确路径才能显示出来。
3.img添加一个属性
$("#img").attr(src,"上传的图片路径")
3.针对jquery.js1.6以下有的版本,具体版本不记得了,反正出现了不支持haddererror,所以还是得加一个函数,在国外网站上看到的,具体地址忘记了,代码如下,添加到ajaxfileupload.js
handleError:function( s, xhr, status, e ) { if ( s.error ) { s.error.call( s.context || window, xhr, status, e ); } if ( s.global ) { (s.context ? jQuery(s.context) : jQuery.event).trigger( "ajaxError", [xhr, s, e] ); } }
相关推荐
文件上传几乎是每个项目所必须的,这里介绍Asp.net MVC结合Jquery ajaxfileupload实现文件上传,兼容主流浏览器
ajaxfileupload多文件上传,ajaxfileupload多文件上传,ajaxfileupload多文件上传,ajaxfileupload多文件上传
ajaxFileUpload上传文件,ajaxFileUpload上传文件,ajaxFileUpload上传文件,ajaxFileUpload上传文件,ajaxFileUpload上传文件
ajaxFileUpload 文件上传
通过ajaxfileupload实现JS的文件上传
AJAXFileUpload ajax 异步文件上传 进度条AJAXFileUpload ajax 异步文件上传 进度条
修改ajaxfileupload.js 文件,实现ajaxfileupload文件上传进度条
ajaxFileUpload插件是一个非常简单的基于Jquery的异步上传文件的插件,使用过程中发现很多与这个同名的,基于原始版本基础之上修改过的插件,文件版本比较多,我把我自己使用的ajaxFileUpload文件上传到博客园上了,...
NULL 博文链接:https://lvzhou-31.iteye.com/blog/2202938
AjaxFileUpload实现文件上传 一个简单的例子
自己写的一个js的基于ajaxfileupload的多文件上传控件,后端代码用的c#MVC,更多详细讲解参见博客:http://www.cnblogs.com/csqb-511612371/
AjaxFileUpload实现文件异步上传(功能实现代码).rar AjaxFileUpload实现文件异步上传, 文件域添加change事件,改变文件域时执行上传文件功能 $("#upload-excel-file").bind("change", function() { $....
关于ajaxfileupload 文件上传实例,包括spring mvc 下后台接受上传请求时的处理代码。但目前是不完整的,未完待续...
这个文件是在ajaxFileUpload.js文件基础上修改的,主要解决了以下问题: 1、由于jquery版本问题引起的bug,解决了ajaxFileUpload 报jQuery....3、优化,解决了使用ajaxFileUpload除了上传文件外不能传递其他参数的bug
ajaxfileupload.js用于文件上传
常规的代码,没有什么特别有含量的. .NET MVC实现多图片上传并附带参数(ajaxfileupload)
ajaxfileupload.js 这是个非常好的异步上传图片的插件,来解决form表单上传时要刷新页面的问题。支持多文件上传
ajaxfileupload上传文件插件,支持多文件上传