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的格式,否则后台无法接受参数

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/514301.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

三字经带拼音a4打印版_人教版八年级下册英语6单元重点单词带音标打印版

UNIT 6shoot [ʃu:t] v. 投篮,射击,发射stone [stəʊn] n. 石头weak [wi:k] adj. 虚弱的,柔弱的god [ɡɒd] n. 上帝,神remind [rɪmaɪnd] v. 提醒,使想起bit [bɪt] n. 一点,小块a little bit 有点儿&am…

拥抱云原生,Fluid结合JindoFS :阿里云OSS加速利器

简介: Fluid 是一个开源的 Kubernetes 原生的分布式数据集编排和加速引擎,主要服务于云原生场景下的数据密集型应用。在 Fluid 上使用和部署 JindoRuntime 实现数据集的可见性、弹性伸缩、数据迁移、计算加速等,并流程简单、兼容原生 k8s 环境…

【观点】传统企业如何在数字化时代实现进化?

简介: 我们看到的数字化的大多数场景集中于日常商业消费活动,背后其实是超越个体行为的场景变革。 究竟是谁在承载这个时代一步步走进数字化场景?又是谁通过数字化技术与解决方案帮助他们实现场景变革?这个过程是什么样的&#xf…

网易数帆发布轻舟低代码平台2.0,聚焦中等复杂度企业级应用

编辑 | 宋 慧 出品 | CSDN云计算 头图 | 轻舟低代码平台2.0发布会现场 8月26日,网易数帆正式发布轻舟低代码应用开发平台2.0版本(以下简称“轻舟低代码平台”),以全新的可视化编程语言为特色,针对中等复杂度的企业级应…

doremi服务器可以导出文件,Doremi服务器检查与IMB 的通信-放映技术论坛

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼Doremi服务器检查与IMB 的通信-放映技术论坛http://www.ffffly.comDoremi服务器检查检查与IMB 的通信检查与 IMB 的通信 先检 查 网络配置 ,确定没有问题后执行以下步骤:运 行 以 下 命 令 :/dor…

宝塔 开启_宝塔面板安装完的一些列操作

前言新安装的宝塔会有很多地方需要配置,如果懂的大佬可以跳过,如果是小白可以按照辉哥的教程一步步操作,辉哥是以虚拟机进行操作的,但是服务器也是一样的道理!安全入口因为现在使用宝塔面板的人数在激增。所以为了避免…

黑灰产攻击洪峰来袭,企业如何守住自己的钱袋子?

简介: 风控大考最佳实践 根据阿里云历史行业风险治理相关数据显示,未经风险管控的自然流量中,约三分之一比例属于疑似黑灰产的高风险行为;而在建立合理的风控指标监控体系并采取风险防控手段后,高风险用户比例下降至3%…

服务网格的最佳实践

简介: 服务网格是用于处理服务间通信的专用基础设施层。它负责通过包含现代云原生应用程序的复杂服务拓扑来可靠地传递请求。 微服务发展的这几年,新的技术和概念层出不穷,这些技术的引入本质上都是在围绕服务稳定性和业务开发效率提升&#…

高性能开发,别点,发际线要紧!

作者:轩辕之风O来源:编程技术宇宙-前言-程序员经常要面临的一个问题就是:如何提高程序性能?这篇文章,我们循序渐进,从内存、磁盘I/O、网络I/O、CPU、缓存、架构、算法等多层次递进,串联起高性能…

ajax 同步怎么回调,Ajax jquery同步回调成功

我有这个函数,使ajax调用。我在最后一段代码注释中描述了这个问题。Ajax jquery同步回调成功function doop(){var that this;var theold "theold";var thenew "thenew";$.ajax({url: doop.php,type: POST,data: before theold &after …

如何打造一个高性能的前端智能推理引擎

简介: 什么是前端智能推理引擎又该如何打造和应用呢? 什么是前端智能推理引擎 在前端智能推理引擎之前,我们先来说一下什么是”端智能”。 端智能(On-Device Machine Learning)是指把机器学习的应用放在端侧做。这里…

115配额怎么增加_笔电、平板接口少怎么办,ORICO八合一多功能扩展坞助你一臂之力...

现在笔记本电脑大多都往轻薄的外形上发展,保持性能的前提下可以增加移动的便捷性,但是弊端同样明显,那就是牺牲掉了一部分常用接口。比如我手上这部戴尔XPS,左右两侧加起来只有4个可怜的接口,其中还包括一个SD槽&#…

OpenYurt:延伸原生 Kubernetes 到边缘场景下的落地实践

简介: 随着云原生技术的逐步成熟,阿里云容器服务团队在具体落地实践过程中不断探索云原生技术的应用边界。同时随着物联网和 5G 的迅猛发展,传统的边缘计算架构已经不能满足业务发展的需要。 如何基于云原生技术构建新一代的边缘计算平台成为…

对象存储,为什么那么火?

作者|小枣君 来源|鲜枣课堂引言上期文章(链接:关于存储技术的最强入门科普),小枣君给大家详细介绍了数据存储技术的基本知识,其中重点对DAS、SAN和NAS技术进行了对比分析。我们知道,在很长的一段时间里&…

使用react实现select_React笔记——核心概念:9.表单

1、受控组件在 React 中,可变状态(mutable state)通常保存在组件的 state 属性中,并且只能通过使用 setState()来更新。state:唯一数据源渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。被 React 以这种方式控制取值的表单输入…

可信赖的服务器监控系统,可信赖的网络监控系统,源于专业和专注.PDF

可信赖的网络监控系统,源于专业和专注.PDF可信赖的网络监控系统,源于专业和专注中科网警IT 运维系统监测器详解20 12.07可信赖的网络监控系统,源于专业和专注目录前言 4使用许可证错误!未定义书签。约定 41 监测器说明 52 监测器类型详解 52.1 网络监测器…

压测场景下的 TIME_WAIT 处理

简介: 压测场景下的 TIME_WAIT 处理 1. 序 某专有云项目具备压测场景,在Windows的压测机上用 LoadRunner 进行业务的压力测试,压测运行一段时间后出现大量端口无法分配的报错。 其实通过问题描述,以及 Windows的报错信息基本确定…

DataX在数据迁移中的应用

简介: DataX在数据迁移中的应用 1. DataX定义 首先简单介绍下datax是什么。 DataX是阿里巴巴集团内被广泛使用的离线数据同步工具/平台,实现包括 MySQL、Oracle、SqlServer、Postgre、HDFS、Hive、ADS、HBase、TableStore(OTS)、MaxCompute(ODPS)、DRDS…

华为发布《绿色5G白皮书》,定义绿色5G网络八大技术方向

全球“碳达峰、碳中和”已成主流趋势,为了助力全球运营商绿色网络“双碳”行动计划的达成,在华为首届无线媒体沙龙上,华为无线网络SRAN产品线总裁马洪波发表了“绿色5G,E2四化八大方向,共赢双碳未来”主题演讲&#xf…

判断是否包含大写字符_Python最常用的数据类型中字符串基础函数使用知识点讲解...

字符串是 pthon 中最常用的数据类型。我们可以使用单引号、双引号或者三对单双引号来创建字符串。创建字符串很简单,只要为变量分配一个值即可。Python 的字符串有什么内建函数可以使用?len()方法返回对象(字符、列表、元组等)长度或项目个数。每个字符一…