jquery ajaxfileupload 上传控件 Uncaught SyntaxError: Unexpected token < 问题

最新推荐文章于 2023-04-16 15:19:15 发布

原创最新推荐文章于 2023-04-16 15:19:15 发布 · 4.5k 阅读

0 ·

CC 4.0 BY-SA版权

javascript 同时被 2 个专栏收录

12 篇文章

订阅专栏

前台效果

6 篇文章

订阅专栏

使用ajaxfileupload上传控件时遇到Uncaught SyntaxError: Unexpected token <的问题，通过将json改为jsonp成功解决。但对于大文件上传，出现其他问题，如ClassNotFound错误。解决方法是修改struts2-core核心包中default.properties的上传大小限制。

ajaxfileupload 上传控件简单好用，网上很多相关信息，直接在官网上下载

<script type="text/javascript" src="AjaxFileUploader/jquery.js"></script>
<script type="text/javascript" src="AjaxFileUploader/ajaxfileupload.js"></script>
	
	<script type="text/javascript">
		 function ajaxFileUpload()
    	{
        //starting setting some animation when the ajax starts and completes
	        $("#loading")
	        .ajaxStart(function(){
	            $(this).show();
	        })
	        .ajaxComplete(function(){
	            $(this).hide();
	        });
        
        /*
            prepareing ajax file upload
            url: the url of script file handling the uploaded files
            fileElementId: the file type of input element id and it will be the index of  $_FILES Array()
            dataType: it support json, xml
            secureuri:use secure protocol
            success: call back function when the ajax complete
            error: callback function when the ajax failed
            
                */
	        $.ajaxFileUpload
	        (
	            {
	                url:'uploadFile.action', 
	                secureuri:false,
	                fileElementId:'fileToUpload',
	                dataType: 'jsonp',
	                success: function (data)
	                {
	            		alert("ok");
	                },
	                error: function (data, e)
	                {
	                    alert(e+"no..");
	                }
	            }
	        )
	        
	        return false;

    	} 
	</script>

<body>
  		上传：<img src="AjaxFileUploader/loading.gif" id="loading" style="display: none"/><br/>
  	  	<input type="file" id="fileToUpload" name="file"/><br/>
  	  	<input type="button" value="提交" onclick="ajaxFileUpload()"/>
</body>

上传功能实现了，可以再服务器上看到上传的文件。但是会出现一个问题：

Uncaught SyntaxError: Unexpected token <

并且会弹出 error 方法的信息。

在网上查阅了很多相关资料都没有解决，结果在国外论坛看到了一则信息将 “json” 改为 “jsonp”

试验成功！但不清楚为什么。

这只是上传小文件没问题。但要上传稍大点文件问题就多了（前提是用 ajaxfileupload 控件 ajax 方式，没用表单提交方式）！

the request was rejected because its size (xxx) exceeds the configured maximum (xxx）

NullPoint

对应第一个问题很明显文件超过了 struts2 的默认大小，所以添加拦截

<constant name="struts.multipart.maxSize" value="52428800"/>
<constant name="struts.multipart.saveDir" value="/tmp"/>

<action>
<interceptor-ref name="fileUpload">
      <param name="maximumSize">500000</param>
      <param name="allowedTypes">application/vnd.ms-powerpoint</param>    
</interceptor-ref>
</action>

这样第一个问题基本解决，但第二个问题来了：这样改了之后，Action 中就再接收不到 file 了，为 null。file 和 fileFileName 都为空，自然报空指针了，在网上找了很多资料都不管用，用 ajax 传的这方面信息不到，实在没办法了，只能最后一步，修改 struts2-core 源代码了。将默认大小改为 52428800 即可。

中间遇到点小插曲：解压后改完打包导入项目识别不了，报 ClassNotFound 错误。

成功的方式：将 struts2-core 核心包解压，在org... 文件夹中找到 default.properties ,打开后修改上传默认大小保存，再将解压出的所有文件打包成 zip 文件，手动修改后缀名为 jar