文档章节

Ajax方式上传文件

素人派
 素人派
发布于 2016/12/31 20:48
字数 367
阅读 7
收藏 1
  • 介绍
传统的文件上传都是需要刷新页面的,Ajax向来都是用在普通的Form表单中。下面要介绍的就是使用Ajax来上传文件。 我们这里需要用到一个大家可能不太常用的一个对象FormData,这家伙就是个关键——如果你的浏览器不支持的话,下面的内容就别看了。
  • 示例
后台代码就不介绍了,这里有介绍。下面就开始写前台的代码了: 首先肯定是需要一个input标签来定义一个文件选择框了; 然后是js代码: [codesyntax lang="javascript"]
var file = $("#file")[0].files[0];
if(file == null){
	var form = new FormData();
	//form = new FormData($("#formId")[0]);
	form.append("file", file);
	$.ajax({
	    url : "uploadTest.do",
	    async : false,
	    type : "POST",
	    data : form,
	    processData : false,
	    contentType : false,
	    success : function(data) {
	    	console.log(data);
	    	alert(data);
	    }
	});
}
[/codesyntax] 对于上面的代码,有几点需要解释一下: FormData这个对象在初始化的时候,可以直接把一个form表单给传递进去,或者也可以通过append函数来添加字段。 还有ajax的使用中,processData和contentType这两项是必须得。
  • 预览图片
尼玛,选择完图片就能立马预览?有木有啊? [codesyntax lang="javascript"]
$("#electronicSignature").change(function(e){
	var files = e.target.files || e.dataTransfer.files;
	if(files && files.length > 0)
	{
		var file = files[0];
		if (window.createObjectURL!=undefined) { // basic
			url = window.createObjectURL(file) ;
		} else if (window.URL!=undefined) { // mozilla(firefox)
			url = window.URL.createObjectURL(file) ;
		} else if (window.webkitURL!=undefined) { // webkit or chrome
			url = window.webkitURL.createObjectURL(file) ;
		}
		$('<img src="' + url + '"/>').appendTo("body");
	}
});
[/codesyntax]
  • 参考
http://www.w3school.com.cn/jquery/ajax_ajax.asp http://ileson.iteye.com/blog/2099761

本文转载自:http://surenpi.com/2015/01/06/ajax%e6%96%b9%e5%bc%8f%e4%b8%8a%e4%bc%a0%e6%96%87%e4%bb%b6/

素人派
粉丝 26
博文 1907
码字总数 10223
作品 6
东城
程序员
私信 提问

暂无文章

vue入门--简单路由配置

本文转载于:专业的前端网站➜vue入门--简单路由配置   在初始化vue init webpack <工程名>时,有一步是询问是否安装vue-router,选择yes,如果没有安装的话,后面需要自己安装。然后在目录...

前端老手
26分钟前
3
0
怎么给视频配音

很多刚开始尝试视频制作的小伙伴,帮助到怎么给制作完成的视频配音,其实给视频配音的方法非常简单,在手机上可以进行制作,下面一起来看看给视频配音的方法吧! 具体步骤如下: 1、首先在手...

白米稀饭2019
35分钟前
3
0
windows批处理bat脚本编写

什么是bat脚本 .bat结尾的文件其实就是windows上的批处理脚本,Windows中的bat文件相当于 Linux中shell编程的.sh脚本,批量执行DOS命令。 其最简单的例子,是逐行书写在命令行中会用到的各种...

孙幼凌
43分钟前
3
0
华为手机翻译功能怎么使用?这三种方法请务必收藏

华为手机翻译功能怎么使用?在我们的生活中会经常遇到翻译问题,许多外语不好的朋友该怎么办呢?华为手机已经为我们解决了这个问题,今天小编就教大家学会使用华为手机中的三种翻译技巧,需要...

翻译小天才
51分钟前
5
0
企业服务软件开发中需要注意的三个问题

在开发企业服务软件时,我们需要分为:业务需求、用户需求、产品需求,三大需求层次,三个层次互相关联,企业服务软件开发首先要服务业务,需要满足业务的需求,再关注用户体验,也就是用户需...

积木创意科技
54分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部