ajaxFileUpload plugin上传文件 chrome、Firefox中出现SyntaxError:unexpected token <

使用ajaxFileUpload上传文件时遇到的一些问题,原本在本地用IE8测试一切正常。。

1.然后QA用Chrome测试之后说不能上传文件,报错(文件名获取)

HTML 代码:

<table id="deploy_application" class="bordered-table">  
  <tr>  
    <td id="application_file">  
      <input id="file_field" type="file" name="application" size="20" />  
    </td>  
    <td id="application_submit">  
      <input id="submit_button" type="submit" value="Upload" onclick="uploadFile()" />  
    </td>  
  </tr>  
</table>  

JS代码:

function ajaxFileUpload() {  
      
  $.ajaxFileUpload  
    (  
      {  
        url: '~Home/Upload',  
        secureuri: false,  
        fileElementId: 'file_field',  
        dataType: 'json', //这里选择了json  
              
        success: function (data, status) {  
          alert(data);  
        },  
                  
        error: function (data, status, e) {  
           alert(e);  
        }  
      }  
    )  
} 
后台代码是读取文件名后获取文件名,然后去获取流上传文件,然后调试发现在IE上返回的FileName是文件的绝对路径,而在Chrome和FF上返回的是只有文件名,然后IIS会默认添加上自己的前缀,导致获取不到文件路径并非绝对路径,找不到文件。

然后发现
ajaxFileUpload返回的对象里面就有文件的input流,直接用此流去读取文件不但解决了文件不能上传的问题,还解决了当上传机器和服务器不是一台机器时,在服务器上找不到路径的问题。本地测试通过,于是很欢喜的以为问题解决。

2、下午的时候,站点发布到服务器,结果又出现了同样的提示,测试发现问题是后台代码返回error,也就是
ajaxFileUpload没有成功

经过测试发现是因为写死的路径找不到,因为发布的版本和在VS里的版本文件顺序和层次有些变化,于是乎修改ajaxFileUpload如下

JS代码:
function ajaxFileUpload() {  
      
  $.ajaxFileUpload  
    (  
      {  
        url:  '@Url.Action("Upload", "Home")',
        secureuri: false,  
        fileElementId: 'file_field',  
        dataType: 'json', //这里选择了json  
              
        success: function (data, status) {  
          alert(data);  
        },  
                  
        error: function (data, status, e) {  
           alert(e);  
        }  
      }  
    )  
} 

 这样就会去对应的文件夹下去找对应的Action,测试成功!发布到服务器后可正常使用!

原文地址:https://www.cnblogs.com/fengsui/p/3073893.html