返回首页
专题
网络编程
ASPjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播 .NETjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播 PHPjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播 JSPjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播 C#jrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播 Javajrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播 Delphijrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播 VBjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播 C/C++jrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播 Android开发 IOS开发 Windows Phone开发 Pythonjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播 Rubyjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播 移动开发 其他编程jrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播
网页制作
HTMLjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播 CSSjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播 Dreamweaverjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播 FrontPagesjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播 Javascriptjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播 web前端
数据库
SqlServer MySql Oracle Access DB2 SQLite 其他数据库
图形设计
photoshopjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播 Fireworksjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播 CorelDrawjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播 Illustratorjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播 AutoCadjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播 FLASHjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播
操作系统
Windows xpjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播 Windows 7jrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播 Windows 8jrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播 Windows 2003jrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播 Windows Server 2008jrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播 Linuxjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播 Windows 10
网站运营
建站经验 SEO优化 站长心得 网赚技巧 网站推广 站长故事
手机学院
手机速递 安卓jrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播 iphonejrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播 手机评测 手机技巧 手机知识 手机应用 手机游戏 手机导购
网店宝典
开店指导 开店经验 网店装修 网店推广 网店seo 网购技巧
软件jrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播
办公软件 系统工具 媒体工具 压缩工具 图文处理 文件管理
范文之家
自我介绍 自我鉴定 写作模板 合同范本 工作总结 贺词祝福语 演讲致辞 思想汇报 入党申请书 实习报告 心得体会 工作计划 简历模板 工作报告 导游词 评语寄语 口号大全 策划书范文
信息工程
软件工程 企业开发 系统运维 软件测试
移民之家
移民动态 移民政策 移民百科 移民生活 技术移民 投资移民
知识大全
母婴 数码 摄影 装修 美文 常识 时尚 婚嫁 美食 养生 旅游 兴趣 职场 教育 文学 健康
问答大全
电脑网络 手机数码 QQ专区 生活 游戏 体育运动 娱乐明星 休闲爱好 文化艺术 社会民生 教育科学 健康医疗 商业理财 情感家庭 地区问题 其他
编程问答
IOS Android .NET Java C/C++ Delphi VC/MFC 其他语言 PHP MSSQL MYSQL Oracle 其他数据库 Web开发 Windows Linux 硬件/嵌入开发 网络通信 移动开发 云计算 企业IT 游戏开发
笑话大全
幽默笑话 爱情笑话 成人笑话 校园笑话 爆笑笑话 综合笑话 古代笑话 现代笑话 国外笑话

ajaxfileupload.js结合input[type=file]无刷新上传

来源:互联网  时间:2015/3/21 7:08:23

jQuery插件AjaxFileUpload用来实现ajax文件上传,该插件使用非常简单,接下来写个demo演示怎么用AjaxFileUpload插件实现文件上传。

说明:

语法:$.ajaxFileUpload([options])

  options参数说明:

1、url            上传处理程序地址。  
2,fileElementId       需要上传的文件域的ID,即的ID。
3,secureuri        是否启用安全提交,默认为false。 
4,dataType        服务器返回的数据类型。可以为xml,script,json,html。如果不填写,jQuery会自动判断。
5,success        提交成功后自动执行的处理函数,参数data就是服务器返回的数据。
6,error          提交失败自动执行的处理函数。
7,data           自定义参数。这个东西比较有用,当有数据是与上传的图片相关的时候,这个东西就要用到了。
8, type            当要提交自定义参数时,这个参数要设置成post

错误提示:

1,SyntaxError: missing ; before statement错误
  如果出现这个错误就需要检查url路径是否可以访问
2,SyntaxError: syntax error错误
  如果出现这个错误就需要检查处理提交操作的服务器后台处理程序是否存在语法错误
3,SyntaxError: invalid property id错误
  如果出现这个错误就需要检查文本域属性ID是否存在
4,SyntaxError: missing } in XML expression错误
  如果出现这个错误就需要检查文件name是否一致或不存在
5,其它自定义错误
  大家可使用变量$error直接打印的方法检查各参数是否正确,比起上面这些无效的错误提示还是方便很多。


1、引入其支持文件,注意引用顺序


2、在页面设置文件选择框,无需form包裹:注意此处id和name必须设置,在文章中你将知道原因,在此不做详细解释。


3、实现上传功能

4、后台接口:此处采用spring MVC

@RequestMapping(value = "/upload", method ={RequestMethod.POST,RequestMethod.GET})
	@ResponseBody
	public HashMap upload(HttpServletRequest request, HttpServletResponse response) 
                                                    throws InstantiationException, IllegalAccessException{
		HashMap result=new HashMap();
		ArrayList attachList=attachService.uploadfy(request);
		if(attachList.size()>0){
			result.put("success", true);		
			result.put("result", attachList);
		}else{
			result.put("success", false);		
		}
	    return result;
	}
5、实现以上步奏即可完成上传。
总结:

在使用过程中可能遇到如下问题:

1、上传报该异常:SyntaxError:Unexpected token <

     原因:是因为Server端的Response上加上了contentType="application/json"。但有时后端这么做是必须的,所以修改ajaxFileUpload源码,将

标签去掉,如下:
 (请参考:http://liwx2000.iteye.com/blog/1540321)

uploadHttpData: function( r, type ) {  
        var data = !type;  
        data = type == "xml" || data ? r.responseXML : r.responseText;  
        // If the type is "script", eval it in global context  
        if ( type == "script" )  
            jQuery.globalEval( data );  
        // Get the JavaScript object, if JSON is used.  
        if ( type == "json" ) {  
             ////////////以下为新增代码///////////////  
             data = r.responseText;  
             var start = data.indexOf(">");  
             if(start != -1) {  
               var end = data.indexOf("<", start + 1);  
               if(end != -1) {  
                 data = data.substring(start + 1, end);  
                }  
             }  
              ///////////以上为新增代码///////////////  
              eval( "data = " + data);  
        }  
        // evaluate scripts within html  
        if ( type == "html" )  
            jQuery("
").html(data).evalScripts(); return data; }

2、使用该方式,在后台接收不到值?
      原因:需要设置一下name属性    

   


上一篇jQuery源码分析系列目录
下一篇JQuery.Ajax之帮助信息
明星图片
相关文章
《ajaxfileupload.js结合input[type=file]无刷新上传》由码蚁之家搜集整理于网络,
联系邮箱:mxgf168#qq.com(#改为@)