ajax + ajaxfileupload 上传文件

来源：互联网发布：云网络编辑：程序博客网时间：2024/06/05 00:54

</pre>有很多时候不能使用form提交表单的形式去异步上传文件，ajaxfileupload.js 是一个很不错的选择，不需要form表单就可以直接提交，ajaxfileupload.js  是基于jq的，所以引用ajaxfileupload.js之前需要先引用jq<p></p><p></p><pre code_snippet_id="1889832" snippet_file_name="blog_20160920_2_7231228" name="code" class="javascript"><script src="/Themes/Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>    <script src="script/ajaxfileupload.js" type="text/javascript"></script>

html

<a href="#" data="f12913db-1273-4090-af49-ce6e802f2654&wenjian" class="a-upload"><span style="font-family: Arial, Helvetica, sans-serif;"><input type="file" class="upfile" name="fillName" id="f12913db-1273-4090-af49-ce6e802f2654&wenjian" >点击这里上传文件</a></span><span style="font-family: Arial, Helvetica, sans-serif;"><input type="hidden" runat="server" id="H_f12913db-1273-4090-af49-ce6e802f2654&wenjian"  name="z_f12913db-1273-4090-af49-ce6e802f2654&wenjian"></span>

//上传文件    $('.upfile').change(function () {   //预览        // 获取FileList的第一个元素        var id = $(this).attr("id");        id = id.split('|')[0];        $.ajaxFileUpload({            url: 'UploadFile.ashx',            secureuri: false, //<span style="font-family: verdana, sans-serif; font-size: 13px; line-height: 19.5px;">是否启用安全提交，默认为false。 </span>            fileElementId: id,            dataType: 'json',            success: function (data, status) {                $("#H_" + id).attr("value", data);                $("#H_" + id).parent().append("<div class=\"ts_img\" id=\"err_User_name\"><img src=\"images/dui.png\" width=\"16px\"></div>");            },            error: function (data, status, e) {                $("#H_" + id).attr("value", src);                $("#H_" + id).parent().append("<div class=\"ts_img\" id=\"err_User_name\"><img src=\"images/cuo.png\" width=\"16px\"></div>");            }        });    });

然后问题来了，文件明明上传成功，但是总是走erroe，不进success,

后来我把data输出到控制台发现输出结果是

发现返回值被<pre>标签包括这，然后我在网上各种找，用了半天事件解决了

把eval("data = " + data); 换成 eval("data = \" " + data + " \" ") 即可

然后你仔细看会发现，我的id中有特殊字符，可能也会是你上传走error，

把oldElement的取值换一下就行了，仔细试试就OK了

如果你觉得很好，赞一下吧，鼓励一下~~~~~~

好人做到底，我把我的ajaxfileupload.js代码粘贴一下

0 0