ajaxFileUpload插件上传文件 返回 syntaxError :unexpected token <

前端之家收集整理的这篇文章主要介绍了ajaxFileUpload插件上传文件 返回 syntaxError :unexpected token <前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
  1. <tableid="deploy_application"class="bordered-table">
  2. <tr>
  3. <tdid="application_file">
  4. <inputid="file_field"type="file"name="application"size="20"/>
  5. </td>
  6. <tdid="application_submit">
  7. <inputid="submit_button"type="submit"value="Upload"onclick="uploadFile()"/>
  8. </td>
  9. </tr>
  10. </table>


最近在使用ajaxFileUpload插件文件上传时,后端返回json格式的数据,js代码如下:

  1. functionajaxFileUpload(){
  2. $.ajaxFileUpload
  3. (
  4. {
  5. url:'/upload',
  6. secureuri:false,
  7. fileElementId:'file_field',
  8. dataType:'json',//这里选择了json
  9. success:function(data,status){
  10. alert(data);
  11. },
  12. error:function(data,status,e){
  13. alert(e);
  14. }
  15. }
  16. )
  17. }


结果在chrome和FireFox浏览器出现如下错误



先在网上找了下解决办法,stackoverflow上有说修改ajaxFileUpload源码的方法,试了下,不能用,问题依旧,只能自己排查下原因了。从错误提示上看有点像是json数据中出现了<(尖括号),为了看到json数据,将js修改如下:
  1. functionajaxFileUpload(){
  2. $.ajaxFileUpload
  3. (
  4. {
  5. url:'/upload',
  6. dataType:'content',//这里修改为content
  7. success:function(data,e){
  8. alert(e);
  9. }
  10. }
  11. )
  12. }


结果返回的json数据如猜测,json数据被包含在一个<pre></pre>的标签中,如下图:



网上查了下原因,是因为Server端的Response上加上了contentType="application/json"。但有时后端这么做是必须的,所以修改ajaxFileUpload源码,将<pre></pre>标签去掉,如下:
  1. uploadHttpData:function(r,type){
  2. vardata=!type;
  3. data=type=="xml"||data?r.responseXML:r.responseText;
  4. //Ifthetypeis"script",evalitinglobalcontext
  5. if(type=="script")
  6. jQuery.globalEval(data);
  7. //GettheJavaScriptobject,ifJSONisused.
  8. if(type=="json"){
  9. ////////////以下为新增代码///////////////
  10. data=r.responseText;
  11. varstart=data.indexOf(">");
  12. if(start!=-1){
  13. varend=data.indexOf("<",start+1);
  14. if(end!=-1){
  15. data=data.substring(start+1,end);
  16. }
  17. }
  18. ///////////以上为新增代码///////////////
  19. eval("data="+data);
  20. }
  21. //evaluatescriptswithinhtml
  22. if(type=="html")
  23. jQuery("<div>").html(data).evalScripts();
  24. returndata;
  25. }


至此,大工告成,ajaxFileUpload的dataType正常使用json。

原文地址;http://liwx2000.iteye.com/blog/1540321

猜你在找的Ajax相关文章