html5 异步上传

图片上传原来都用uploadify这个插件的

后来看到有用html5异步上传,感觉不错.自己动手整了一个ThinkPHP+uploadify+html5 异步上传图片:

html代码

<div class="form-group">
    <label for=''>Html5 上传</label>
    <button class="btn btn-primary" id="selsect">选择文件</button>
    <input type="file" id="fileselect" class="form-control" name="fileselect[]" multiple="multiple"/> 
</div> 

js代码

//选择文件
$('#fileselect').change(function(event) {			
       <span style="white-space:pre">	</span>event.preventDefault();
       <span style="white-space:pre">	</span>var n=event.target.files.length;		        
       <span style="white-space:pre">	</span>var file;		        
<span style="white-space:pre">	</span>for (var i = 0; i < n; i++) {
		file=event.target.files[i];
		html5up(file);
	};						        
});	
//上传操作
function html5up(file){
<span style="white-space:pre">	</span>/* Act on the event */
	var form_data=new FormData();				
	form_data.append('timestamp',"{$time}");
	form_data.append('token','{:md5("unique_salt".$time)}');
	form_data.append("Filedata",file);							
	$.ajax({
	<span style="white-space:pre">	</span>url: '{:U("Index/upload",null,false)}',
		type: 'POST',
		// dataType: 'default: Intelligent Guess (Other values: xml, json, script, or html)',
		processData: false,
		contentType: false,
		data: form_data,
	})
	.done(function(data) {
		// alert(data);					
	        if (!data.status) {
	          	alert(data.info);
	            	return false;
	        };		            
	        put_img(data.savepath,data.savename);//添加图片到img_box
		console.log("success");
	});

}

非常关键的是:

processData: false,
contentType: false,

这两个一定要设置不然jquery会自动处理form_data,然后格式不对会报错就执行不下去了