jsp中使用jquery的ajaxfileupload插件怎么实现异步上传

如题所述

ajaxfileupload实现异步上传的完整例子:
JSP页面中引入的script代码:
<script>
function ajaxFileUpload()
{
$("#loading").ajaxStart(function(){
$(this).show();
})//开始上传文件时显示一个图片
.ajaxComplete(function(){
$(this).hide();
});//文件上传完成将图片隐藏起来

$.ajaxFileUpload({
url:'AjaxImageUploadAction.action',//用于文件上传的服务器端请求地址
secureuri:false,//一般设置为false
fileElementId:'imgfile',//文件上传空间的id属性 <input type="file" id="imgfile" name="file" />
dataType: 'json',//返回值类型 一般设置为json
success: function (data, status) //服务器成功响应处理函数
{
alert(data.message);//从服务器返回的json中取出message中的数据,其中message为在struts2中定义的成员变量

if(typeof(data.error) != 'undefined')
{
if(data.error != '')
{
alert(data.error);
}else
{
alert(data.message);
}
}
},
error: function (data, status, e)//服务器响应失败处理函数
{
alert(e);
}
}
)

return false;
}
</script>
struts.xml配置文件中的配置方法:
<struts>
<package name="struts2" extends="json-default">
<action name="AjaxImageUploadAction" class="com.test.action.ImageUploadAction">
<result type="json" name="success">
<param name="contentType">text/html</param>
</result>
<result type="json" name="error">
<param name="contentType">text/html</param>
</result>
</action>
</package>
</struts>
上传处理的Action ImageUploadAction.action
package com.test.action;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.util.Arrays;
import org.apache.struts2.ServletActionContext;
import com.opensymphony.xwork2.ActionSupport;
@SuppressWarnings("serial")
public class ImageUploadAction extends ActionSupport {

private File imgfile;
private String imgfileFileName;
private String imgfileFileContentType;
private String message = "你已成功上传文件";
public File getImgfile() {
return imgfile;
}
public void setImgfile(File imgfile) {
this.imgfile = imgfile;
}
public String getImgfileFileName() {
return imgfileFileName;
}
public void setImgfileFileName(String imgfileFileName) {
this.imgfileFileName = imgfileFileName;
}
public String getImgfileFileContentType() {
return imgfileFileContentType;
}
public void setImgfileFileContentType(String imgfileFileContentType) {
this.imgfileFileContentType = imgfileFileContentType;
}
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}

@SuppressWarnings("deprecation")
public String execute() throws Exception {

String path = ServletActionContext.getRequest().getRealPath("/upload/mri_img_upload");
String[] imgTypes = new String[] { "gif", "jpg", "jpeg", "png","bmp" };
try {
File f = this.getImgfile();

String fileExt = this.getImgfileFileName().substring(this.getImgfileFileName().lastIndexOf(".") + 1).toLowerCase();
/*
if(this.getImgfileFileName().endsWith(".exe")){
message="上传的文件格式不允许!!!";
return ERROR;
}*/
/**
* 检测上传文件的扩展名是否合法
* */
if (!Arrays.<String> asList(imgTypes).contains(fileExt)) {
message="只能上传 gif,jpg,jpeg,png,bmp等格式的文件!";
return ERROR;
}

FileInputStream inputStream = new FileInputStream(f);
FileOutputStream outputStream = new FileOutputStream(path + "/"+ this.getImgfileFileName());
byte[] buf = new byte[1024];
int length = 0;
while ((length = inputStream.read(buf)) != -1) {
outputStream.write(buf, 0, length);
}
inputStream.close();
outputStream.flush();
} catch (Exception e) {
e.printStackTrace();
message = "文件上传失败了!!!!";
}
return SUCCESS;
}
}
温馨提示:内容为网友见解,仅供参考
第1个回答  2014-12-29
<script type=text/javascript src=js/jquery.js</script
<script type=text/javascript src=js/ajaxfileupload.js</script
<!-- 执行上传文件操作的函数 --
<script type=text/javascript
function ajaxFileUpload(){
$.ajaxFileUpload({url:'update.do?method=uploader', //需要链接到服务器地址
secureuri:false,
fileElementId:'houseMaps', //文件选择框的id属性
dataType: 'xml', //服务器返回的格式,可以是json
success: function (data, status) //相当于java中try语句块的用法{$('#result').html('添加成功');},
error: function (data, status, e) //相当于java中catch语句块的用法{$('#result').html('添加失败');}});}</script</head<body<form method=post action=update.do?method=uploader enctype=multipart/form-data
<input type=file id=houseMaps name=houseMaps/
<input type=button value=提交 onclick=ajaxFileUpload()/</form<div id=result</div</body</html服务器代码:
public class UpdateAction extends DispatchAction {
public ActionForward uploader(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response) {
UpFormForm upFormForm = (UpFormForm) form;
FormFile ff = upFormForm.getHouseMaps();try {InputStream is = ff.getInputStream();
File file = new File(D:/ + ff.getFileName()); //指定文件存储的路径和文件名
OutputStream os = new FileOutputStream(file);
byte[] b = new byte[1024];
int len = 0;
while((len = is.read(b)) != -1){
os.write(b, 0, len);}os.close();
is.close();
} catch (Exception e) {本回答被提问者和网友采纳

jsp中使用jquery的ajaxfileupload插件怎么实现异步上传
.ajaxFileUpload({ url:'AjaxImageUploadAction.action',\/\/用于文件上传的服务器端请求地址 secureuri:false,\/\/一般设置为false fileElementId:'imgfile',\/\/文件上传空间的id属性 dataType: 'json',\/\/返回值类型 一般设置为json success: function (data, status) \/\/服务器成功响应处理函数 { a...

jsp中使用jquery的ajaxfileupload插件怎么实现异步上传
function ajaxFileUpload(){ .ajaxFileUpload({url:'update.do?method=uploader', \/\/需要链接到服务器地址 secureuri:false,fileElementId:'houseMaps', \/\/文件选择框的id属性 dataType: 'xml', \/\/服务器返回的格式,可以是json success: function (data, status) \/\/相当于java中try语...

通过jquery实现异步上传时总是提示parsererror,请问应该怎么解决
先用GET方式提交,这样可以访问提交的URL看下PHP的返回值是什么情况,

ThinkPHP+ajaxfileupload怎么实现异步上传图片?
首先你得会使用ajaxfileupload这个插件才行,只有里面的url参数写地址时才和thinkphp关联,如果配置正确,在你写的url地址后台用$_FILES就可以接收到图片信息,后面的就是数据库等其他操作了,正确后返回一个ajaxfileupload想要的格式,前台就可以接受处理了 ...

ajaxFileUpload异步上传图片,服务器文件叫多,如何删除啊~~
比如有个图像上传预览。也是要及时预览并上传到服务器端。我用的是uploady上传插件。第一张图片上传后以用户名命名.JPG保存。第二次上传就判断当前用户的photo【这是上传图片保存在数据库中】是否存在,如果存在就以用户名#TEMP#.JPG【如果当前用户的photo已是#TEMP#.JPG结尾则以用户名.JPG】保存。如果...

js文件上传fileupload(js文件上传后端是如何拿到文件的)
要实现下面这样一个js方法:file_upload(文件内容,URL){\/\/用jQuery将文件内容传送至URL...}不用任何jQuery插件,请问如何实现上述功能。ajaxFileUpload是一个异步上传文件的jQuery插件,语法:$.ajaxFileUpload([options])。使用方法:第一步:先引入jQuery与ajaxFileUpload插件。注意先后顺序。我的理解是...

ajax怎么提交带文件上传表单
ps:Ajax技术基本上可以说是由google公司带起来的,但少Gmail中上传文件用的还是 IFrame,所以说使用IFrame来上传文件是最好的选择。 我在这里这里用的技术是jsp,其实asp,php等也是一样可以这么实现的 一共两个文件就可实现:index.html 和 upload.jsp,在这里讲解一下,文后会附上源码--index...

JS ajaxFileUpload 传参数的时候 有没有和ajax一样的 type:'post' 的...
语法:$.ajaxFileUpload([options])options参数说明:1、url 上传处理程序地址。2,fileElementId  需要上传的文件域的ID,即的ID。3,secureuri  是否启用安全提交,默认为false。4,dataType  服务器返回的数据类型。可以为xml,script,json,html。如果不填写,jQuery会自动判断。5,success提交成功...

上传excel文件读取内容可以异步吗
可以。ajaxfileupload.js插件可以实现Excel的异步上传,所以上传excel文件读取内容可以异步。MicrosoftExcel是Microsoft为使用Windows和AppleMacintosh操作系统的电脑编写的一款电子表格软件。

jquery的post方法上传文件问题。
{ .ajaxFileUpload ({ url:'doajaxfileupload.php', \/\/你处理上传文件的服务端 secureuri:false,fileElementId:'img',dataType: 'json',success: function (data){ alert(data.file_infor);} } )return false;} Upload

相似回答