jQuery 文件上传插件ajaxFileUpload使用以及onchange问题

最新推荐文章于 2024-08-22 09:31:39 发布

ypp91zr

最新推荐文章于 2024-08-22 09:31:39 发布

阅读量1.2k

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/ypp91zr/article/details/78018882

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

今天用了ajaxFileUpload文件上传的一个插件，开始提示$ is not a function,这个是jQuery没引入，秒解决。

突然又来$.ajaxFileUpload is not a function，有点懵逼了，顺序也是正确的，没有发现任何问题。

后面紧接着还有一个提示$(...).live is not a function，这个函数是$.ajaxFileUpload里面的。

然后进去看了发现change，

因为当时页面我绑定了一个事件

<input id="fileToUpload" type="file" name="file" multiple="multiple" οnchange="ajaxFileUpload()"/>

οnchange="ajaxFileUpload()问题就出在这里。因为才开始接触比较多的前端知识，把onchange改成change？或者livechange？（这个应该不行）。具体没这样试。我直接在js写的onchange事件，然后什么错误都没有，一切正常，图片已存储都可以。

那么问题又来了，onchange只执行一次，哇靠，上传一张图片之后再点击无效。心想执行一次，那就把它替换了从新加事件吧。一切OK

代码：

uploadListener();
	function uploadListener() {
		$("#fileToUpload").on('change', function() {
			$.ajaxFileUpload({
				url : '/foodRecomment/upload',
				secureuri : false,
				fileElementId : 'fileToUpload', //file标签的id  
				dataType : 'text', //返回数据的类型  
				//             data:{name:'name'},//一同上传的数据  
				success : function(data, status) {
					console.debug(data);
					data = data.replace(/<pre.*?>/g, '');
					data = data.replace(/<PRE.*?>/g, '');
					data = data.replace("<PRE>", '');
					data = data.replace("</PRE>", '');
					data = data.replace("<pre>", '');
					data = data.replace("</pre>", '');
					data = $.parseJSON(data);
					if (data.dealFlag == 1) {
//						alert(data.dealMsg);
//						var template = $("#template").html();
//						var html = Mustache.render(template, data);
//						fileNameList.push(data.fileName);
//						$("#upload").before(html);
						$("#fileToUpload").replaceWith("<input id='fileToUpload' type='file' name='file' multiple='multiple'/>");
						uploadListener();
					} else if (data.dealFlag == 0) {
						alert(data.dealMsg);
					}
				},
				error : function(data, status, e) {
					alert(e);
				}
			});
		});
	}