【web】文件上传

接近年尾了，手头上的工作已经基本完成，终于有空可以写写教程了。

不管是在网页开发，还是在移动端开发上，有时业务需求会要求上传一些文件。

这里我使用的方法十分简单，使用<input type=”file”>就可以

备注：本教程不作表单美化的过多讲解，说太多只让各位同学头晕，大神飘过，可以拍砖。

示例：

html:

其中第一个input是选择文件的，其他的input是用于存储获取的信息使用

<input type="file" name="uploadfile" id="chooserFile" value=""></input>
<input type="hidden" name="file_base64" id="file_base64" value=""></input>
<input type="hidden" name="file_name" id="file_name" value=""></input>

js：

这里演示使用了Jquery库来获取选择的文件，$('#chooserFile').get(0).files[0]; 获取到的文件对象 。

初始化FileReader对象，并把获取到的文件对象放入FileReader对象内，通过FileReader对象的onload函数的事件对象event，可以获取其文件的base64。

获取到base64以后，放在页面内隐藏的input输入框，待用

	$('#chooserFile').die().live('change',function(e){
		var fileObj = this.files[0];
	        var reader = new FileReader();  
	        reader.readAsDataURL(fileObj);  
	        reader.onload = function(e){  
	            console.log(e.target.result); 
	            var fileName = fileObj.name;
	            //获取到base64后，放在一个hidden的input里面
	            $('#file_base64').val(e.target.result);
	            $('#file_name').val(fileName);
	        };  
        });

获取到文件的base64以后，余下的就是上传了，使用ajax进行上传即可！上传的时候获取文件的base64就直接从隐藏的input里面取就可以了。

至于怎么使用ajax这个问题，这里就不细说了。不明白的可以留言，谢谢。