jQuery上传文件异步
① jqueryfileupload 怎么取消上传
jquery异步上传,一般来说这里上传调用的是系统专门上传的action,上传好后返回上传文件信息。你这里result.files就是返回的上传结果。这个需要你在后台自己封装。你前端需要什么,后台就封装什么。
比如我以前写过一个
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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();
而前断可以将上传文件的唯一标识放到一个隐藏域里,表单提交的时候一起提发送到后台,再根据唯一标识去取上传文件信息或写或复制转移。
② 求一段JS或Jquery异步上传图片的代码
图片和文件等流媒体 上传都是靠from表单的提交。
你可以设置一个隐藏的from表单
里面有个<input id='file' type='file'>
选择玩图片之后赋值给file
然后用jquery from表单提交即可
<formid="form"runat="server"enctype="multipart/form-data">
<inputid='file'type='file'>
</from>
$.ajax({
url:'XXXX',//上传后台路径
data:$('#form').serialize(),
type:"POST",
success:function(){
}
});
③ jsp中使用jquery的ajaxfileupload插件怎么实现异步上传
<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插件怎么实现异步上传
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;
}
}
转载,仅供参考。
⑤ jquery升级后,上传的文件无效
升级后文件类型不匹配,无法上传。
在 IE8/9 中使用 JQuery 上传只能使用 Form 的方式。
使用 JQuery.Ajax 无法上传文件(因为无法使用 FormData,FormData 是 HTML5 的一个特性,IE8/9 不支持)
使用 JQuery Form 上传,contentType 只能为 text/html,因为如果是 application/json 类型,IE8/9 会以文件下载的方式展现 json 数据。