jq ajax异步上传文件,jQuery插件ajaxFileUpload异步上传文件
AjaxFileUpload.js并不是一个很出名的插件,只是别人写好的放出来供大家用,原理都是创建隐藏的表单和iframe然后用JS去提交,获得返回值。
当初做了个异步上传的功能,选择它因为它的配置方式比较像jQuery的AJAX,我很喜欢。
评论里面说到的不行。那是因为我们用的不是同一个js。我上github搜AjaxFileUpload出来很多类似js。
ajaxFileUpload是一个异步上传文件的jQuery插件
传一个不知道什么版本的上来,以后不用到处找了。
语法:$.ajaxFileUpload([options])
options参数说明:
1、url 上传处理程序地址。
2,fileElementId 需要上传的文件域的ID,即的ID。
3,secureuri 是否启用安全提交,默认为false。
4,dataType 服务器返回的数据类型。可以为xml,script,json,html。如果不填写,jQuery会自动判断。
5,success 提交成功后自动执行的处理函数,参数data就是服务器返回的数据。
6,error 提交失败自动执行的处理函数。
7,data 自定义参数。这个东西比较有用,当有数据是与上传的图片相关的时候,这个东西就要用到了。
8, type 当要提交自定义参数时,这个参数要设置成post
错误提示:
1、SyntaxError: missing ; before statement错误
如果出现这个错误就需要检查url路径是否可以访问
2、SyntaxError: syntax error错误
如果出现这个错误就需要检查处理提交操作的服务器后台处理程序是否存在语法错误
3、SyntaxError: invalid property id错误
如果出现这个错误就需要检查文本域属性ID是否存在
4、SyntaxError: missing } in XML expression错误
如果出现这个错误就需要检查文件name是否一致或不存在
5、其它自定义错误
大家可使用变量$error直接打印的方法检查各参数是否正确,比起上面这些无效的错误提示还是方便很多。
使用方法:
第一步:先引入jQuery与ajaxFileUpload插件。注意先后顺序,这个不用说了,所有的插件都是这样。
第二步:HTML代码:
第三步:JS代码
$(function () {
$(":button").click(function () {
ajaxFileUpload();
})
})
function ajaxFileUpload() {
$.ajaxFileUpload
(
{
url: '/upload.aspx', //用于文件上传的服务器端请求地址
secureuri: false, //是否需要安全协议,一般设置为false
fileElementId: 'file1', //文件上传域的ID
dataType: 'json', //返回值类型 一般设置为json
success: function (data, status) //服务器成功响应处理函数
{
$("#img1").attr("src", data.imgurl);
if (typeof (data.error) != 'undefined') {
if (data.error != '') {
alert(data.error);
} else {
alert(data.msg);
}
}
},
error: function (data, status, e)//服务器响应失败处理函数
{
alert(e);
}
}
)
return false;
}
第二个例子
使用ajaxFileUpload上传文件时,有时需要带参数提交,网上有很多资料说使用data,但其实要使用data带参数是需要修改的,否则后台是获取不到的.
分析原因:
ajaxFileUpload为了实现无刷新异步提交文件,构建 iframe 然后创建form表单 再将要上传的文件写上去再提交.但是原代码 却没有处理data.所以这块内容需要我们自己加上去.
下面红色部分为修改ajaxFileUpload.js的三处地方:
备注:好像csdn代码中加颜色加粗 有问题这三处修改的地方我直接贴出来,位置看下面的代码,
①createUploadForm: function(id, fileElementId,data);
②if (data) {
for (var i in data) {
$('').appendTo(form);
}
}
③var form = jQuery.createUploadForm(id, s.fileElementId,s.data);
ajaxFileUpload为了实现无刷新异步提交文件,构建 iframe 然后创建form表单 再将要上传的文件写上去再提交.但是原代码 却没有处理data.所以这块内容需要我们自己加上去.
下面红色部分为修改ajaxFileUpload.js的三处地方:
备注:好像csdn代码中加颜色加粗 有问题这三处修改的地方我直接贴出来,位置看下面的代码,
createUploadForm: function(id, fileElementId,data);
if (data) {
for (var i in data) {
$('').appendTo(form);
}
}
var form = jQuery.createUploadForm(id, s.fileElementId,s.data);
如何使用它呢?
$.ajaxFileUpload({
url: 'http://localhost:8080/HNUST/crawler/ordinary2',
type: 'post',
data : {
url : url,
keyword : keyword,
rule : rule,
data : data,
sign:sign
},
secureuri: false, //一般设置为false
fileElementId: 'file', // 上传文件的id、name属性名
dataType: 'JSON', //返回值类型,一般设置为json、application/json 这里要用大写 不然会取不到返回的数据
success: function(data, status){
alert(data);
},
error: function(data, status, e){
alert(e);
}
});
html:
java:java后台 获取参数还是正常获取:
String url=request.getParameter("url");
String keyword=request.getParameter("keyword");
获取文件并分行读取(非图片):
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
MultipartFile multipartFile = multipartRequest.getFile("file"); //这个file要与fileElementId一致
try {
InputStream inputStream=multipartFile.getInputStream();
BufferedReader reader = new BufferedReader(new InputStreamReader(inputStream));
String tempString = null;
// 一次读入一行,直到读入null为文件结束
while ((tempString = reader.readLine()) != null) {
fileList.add(tempString);
}
} catch (IOException e2) {
// TODO Auto-generated catch block
e2.printStackTrace();
}
使用过程中有两点需要注意的地方:
其一,dataType必须要大写;
其二,在data的值要写成json的格式,否则后台无法接受参数
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
jq ajax异步上传文件,jQuery插件ajaxFileUpload异步上传文件相关推荐
- jQuery插件AjaxFileUpload文件上传实现Javascript多文件上传功能
Ajax file upload plugin是一个功能强大的文件上传jQuery插件,可自定义链接.或其它元素庖代传统的file表单上传结果,可实现Ajax动态提示文件上传 过程,同时支撑多文 ...
- 帮助你高效开发Ajax应用的超酷jQuery插件 - AjaxML
日期:2012-4-20 来源:GBin1.com 如果你使用jQuery进行Ajax开发的话,你一定要试试今天我们这里介绍的这一款jQuery插件 - AjaxML.它是一款能够帮助你提高ajax ...
- 网站开发常用jQuery插件总结(15)上传插件blueimp
在介绍这个插件之前,先吐槽一下.这个插件功能很强大.带有的功能有:上传(单个文件或批量文件),自动上传或点击按钮上传,上传前缩略图显示,判断文件格式,上传前的文件操作,上传时进度条显示等功能.如果你用 ...
- jquery插件:图片上传按比例预览
js部分是这样的: //**********************图片上传预览插件************************ //作者:IDDQD(2009-07-01) //Email:id ...
- JQuery插件秀:生成PDF文件(文本+上传图片+电子签名)
前言 需求如下:根据 docx 模板形成页面,让用户直接填写相关信息,在线生成 PDF 文件,无需用户下载 docx 模板填完信息再转为 PDF. 填写信息包括普通文本.上传图片.在线电子签名. 方案 ...
- 一个简单的jQuery插件ajaxfileupload实现ajax上传文件例子
页面代码: <html> <!-- 引入相关的js文件,相对路径 --> <script type="text/javascript" ...
- ajax页面 js文件上传,jQuery插件ajaxfileupload.js实现上传文件
AjaxUpLoad.js的使用实现无刷新文件上传,如图 1.创建页面并编写HTML 上传文档: 上传图片: 2.引用AjaxUpload.js文件 3.编写JS脚本 window.onload = ...
- Asp.net mvc4用JQuery插件实现异步上传
下载异步上传插件AjaxFileUploader,下载地址:http://phpletter.com/DOWNLOAD/ 解压,保存在 asp.net mvc项目的一个文件夹下,如下图: 1. ...
- java ajax上传图片插件_java图片上传并预览,前台用jQuery插件AjaxFileUpload,后台用FileUtils.copyFile....
个人笔记,以备后用. 表体代码: 查看图片 js代码(记得要引入jquery库和ajaxfileupload库): //上传文件id号 function fileUpload(uploadFileId ...
最新文章
- Nginx的启动和停止
- Redis设计与实现AOF持久化
- 递归算法题解析:设m,n均为自然数,m可表示为一些不超过n的自然数之和,f(m,n)为这种表示方式的数目
- http 请求头 header Referer 含义和作用
- 语音识别学习笔记(二)【基于矢量量化的识别技术】
- 一加7T系列发布时间公布:9月26日北美和印度率先亮相
- DS博客大作业--树(李天明组)
- android 更新apk 应用为安装,应用未安装!从Android Studio构建安装APK时出错 - java
- GPS基带P码处理总结——FPGA实现的关键点
- Twitter 没有在美国总统竞选期间宕机
- unity 3D期末大作业-简单坦克射击游戏
- JavaSE-day01
- encode() decode() 编码解码函数
- 浙江理工大学校园网DNS性能测试脚本
- 100万美金VS100美金FBI本可以在iPhone 5c解锁案中省下一大笔钱
- 嵌入式linux/鸿蒙开发板(IMX6ULL)开发(七)Ubuntu开发环境配置
- Java入门学习-实践:手动输入城市名称5次,完成后输出一份city.txt文档,写出被输入最多次的城市名字
- 关于前端跨域及解决方案详解
- Tomcat服务器日志打印
- 什么是POP3、SMTP及IMAP?POP3与IMAP的区别