AJAX Uplad File 是个简单而美观的上传文件插件。
附件是从官方网站下的例子!
详细使用步骤如下:
1. 下载ajaxupload.js文件。 官方:http://valums.com/ajax-upload/
2. 在JSP中添加JS和CSS代码(如果你想自己定义样式)
<script type="text/javascript" src="<%=request.getContextPath() %>/js/ajaxupload.js"></script>
<style type="text/css">
.wrapper { width: 133px; margin: 0 auto; }
div.button {
height: 20px;
width: 83px;
background: url(../../../images/button.png) 0 0;
font-size: 12px; color: #C7D92C; text-align: center; padding-top: 0px;
}
div.button.hover {
background: url(../../../images/button.png) 0 56px;
color: #95A226;
}
</style>
<table width="80%">
<tr>
<td>inovice:</td><td><div id="inovice" class="button">Upload</div></td>
</tr>
<tr>
<td>COA:</td><td><div id="coa" class="button">Upload</div></td>
</tr>
</table>
$(document).ready(function () {
/* coa : itemFile为action中处理上传时定义的file name onSubmit: 点击上传的处理。 oncomplete: 上传完成后的信息处理*/
var coa = $("#coa"), interval;
new AjaxUpload(coa, {action:path + "/admin/book/item/upload/coa/" + $("#id").val(), name:"itemFile", onSubmit:function (file, ext) {
coa.text("Uploading");
this.disable();
interval = window.setInterval(function () {
var text = coa.text();
if (text.length < 13) {
coa.text(text + ".");
} else {
coa.text("Uploading");
}
}, 200);
}, onComplete:function (file, response) {
coa.text("Upload");
window.clearInterval(interval);
this.enable();
if (response.search("success") == -1) {
$("#coaText").text(file+" -->Error!");
} else {
$("#coaText").text(file+" -->Success!");
}
}});
/* inovice */
var inovice = $("#inovice"), interval;
new AjaxUpload(inovice, {action:path + "/admin/book/item/upload/inovice/" + $("#id").val(), name:"itemFile", onSubmit:function (file, ext) {
inovice.text("Uploading");
this.disable();
interval = window.setInterval(function () {
var text = inovice.text();
if (text.length < 13) {
inovice.text(text + ".");
} else {
inovice.text("Uploading");
}
}, 200);
}, onComplete:function (file, response) {
inovice.text("Upload");
window.clearInterval(interval);
this.enable();
if (response.search("success") == -1) {
$("#inoviceText").text(file+" -->Error!");
} else {
$("#inoviceText").text(file+" -->Success!");
}
}});
});
2. 上传处理,我是用spring 自带的文件上传处理。
*使用spring upload的上传功能首先需要在appliaction-context.xml中加入以下
<!-- upload file -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!--property name="maxUploadSize">
<value>10485760</value>
</property>-->
<property name="maxInMemorySize">
<value>20480</value>
</property>
<property name="defaultEncoding">
<value>UTF-8</value>
</property>
</bean>
action中代码处理
@RequestMapping("/item/upload/{type}/{id}")
public void uploadFile(@PathVariable("type") String type, @PathVariable("id") Integer id, HttpServletRequest request, HttpServletResponse response) {
/* parse upload file */
MultipartHttpServletRequest mhs = (MultipartHttpServletRequest) request;
MultipartFile mf = mhs.getFile("itemFile");
String storePath = globalSettingService.getGlobalSetting().getUploadFilePath();
/* create stroeFolder */
File storeFileFolder = new File(storePath);
if (!checkStoreFolder(storeFileFolder, response)) {
MessageUtils.outputJSONResult("noStorePath", response);
return;
}
/* upload file */
String uploadFilePath = FilePathHelper.uploadFileToStorePath(mf, storeFileFolder);
if ("error".equals(uploadFilePath)) {
MessageUtils.outputJSONResult("error", response);
return;
}
BookItem o = buildBookItem(type, uploadFilePath, id);
bookService.saveBookItem(o);
MessageUtils.outputJSONResult("success", response);
}
/**
* upload file to disk path
* @param mf MultipartFile
* @return upload file absolute path
* @throws Exception
* @throws Exception if occur error throw Exception
*/
public static String uploadFileToStorePath(MultipartFile mf, File storeFile) {
if (null == storeFile || !storeFile.isDirectory()) {return "error";}
CommonsMultipartFile cmf = (CommonsMultipartFile)mf;
DiskFileItem fileItem = (DiskFileItem) cmf.getFileItem();
String fileType = StringUtils.substringAfterLast(fileItem.getName(), ".");
String fileName = generateFileName(fileType);
File storeNewFile = new File(storeFile.getAbsolutePath()+File.separator+fileName);
try {
fileItem.write(storeNewFile);
} catch (Exception e) {
e.printStackTrace();
return null;
}
fileItem.delete();
return fileName;
//return storeNewFile.getAbsolutePath();
}
分享到:
相关推荐
ASP.NET MVC AJAX 文件上传示例代码。 使用 jquery.fileupload + bootstrap 实现,支持多个文件上传。 运行环境:Visual Studio 2012 project, ASP.NET MVC4
jquery ajax file upload
new AjaxUpload(button, { action: 'servlet/import', name: 'newFileName',//更改上传的文件名 data : { 'key1' : "7月份", 'key2' : "8月份", 'key3' : "9月份" }, onSubmit : function...
ajax php file upload文件上传组件,公供学习参考.
ajaxupload,c#上传,jquer上传,按钮上传,jquery,上传,ajaxupload单个按钮实现图片上传,不用file上传
异步文件上传ajaxFileUpload包,从gitHub下载的,分享一下。大家也可以从gitHub下载:https://github.com/davgothic/AjaxFileUpload
jquery官方插件ajax file upload使用的实例,用asp.net做的服务器端。具体说明请看这里http://www.cnblogs.com/luq885/archive/2007/11/15/959749.html
ajax file upload 0.4.0,基于Java的文件上传组件,支持上传文件进度条显示
jquery ajax file upload
AJAX file upload,plugin for java code
Ajax Upload文件上传插件允许你上传多个插件而无需刷新页面,可以使用任何的元素来显示文件选择窗口。它可以在所有主流的浏览器下工作,从2.0版本开始,不需要任何库运行。Ajax Upload文件上传插件不会污染任何命名...
Mini AJAX File Upload Form
使用阿帕奇组建写的一个ajax 里面用filter做控制 减少对框架的入侵 反正是工程就可以使用到里面 只不过要配置下 按照我web。xml里面写的
Ajax (also AJAX short for "Asynchronous JavaScript and XML")[1][2] is a set of web development techniques using many web technologies on the client side to create asynchronous web ...
JSP no refresh Ajax upload file as an example
一键上传文件,免刷新页面即可一键上传,ajax+php+jquery实现的!
ajaxFileUpload 博文链接:https://raising.iteye.com/blog/2233668
NULL 博文链接:https://axl234.iteye.com/blog/894131
主要为大家分享了jQuery Ajax File Upload实例源码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下