js获取上传文件内容，ajax提交/jQuery.form.js

用formData对象承载表单

1. files是文件选取控件的属性，存储的是文件选取控件选取的文件对象，类型是一个数组，下方显示为fileM.files[0];
2. 通过append(key, value)来添加数据，如果指定的key不存在则会新增一条数据，如果key存在，则添加到数据的末尾。formData.append('file', fileObj);第一个参数为添加的表单数据name为file，第二个参数为数据对象。

   <from action="" enctype="multipart/form-data" method="post">
       <a>
           <span>修改头像</span>
           <input type="file" id="fileUp" accept="image/png,image/jpeg">
       </a>
   </from>
   
   var fileM=document.querySelector("#fileUp");
   $("#fileUp").on("change",function() {
       //获取文件对象，files是文件选取控件的属性，存储的是文件选取控件选取的文件对象，类型是一个数组
       var fileObj = fileM.files[0];
       //创建formdata对象，formData用来存储表单的数据，表单数据时以键值对形式存储的。
       var formData = new FormData();
       formData.append('file', fileObj);
       $.ajax({
           url: "自己的后台的Url",
           type: "post",
           dataType: "json",
           data: formData,
           async: false,
           cache: false,
           contentType: false,
           processData: false,
           success: function (json_data) {
               alert("恭喜你！上传成功");
           },
       });
   });
   

jQuery.form.js

jquery.form.js 让表单提交更优雅。可以页面不刷新提交表单，比jQuery的ajax提交要功能强大。
下载插件至官网

1. 引入

<script src="/src/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/src/jquery.form.js"></script>

2. 使用

//html部分
<input type="file" class="file" name="filename"> 
</form> 
<button class="btn btn-primary" onclick="subimtBtn();">提交</button>

JS部分，其中options对象：

target: ‘#output’, //把服务器返回的内容放入id为output的元素中
beforeSubmit: showRequest, //提交前的回调函数
url: url, //默认是form的action， 如果申明，则会覆盖
clearForm: true, //成功提交后，清除所有表单元素的值
resetForm: true, //成功提交后，重置所有表单元素的值
timeout: 3000, //限制请求的时间，当请求大于3秒后，跳出请求

//js部分
function subimtBtn() { 
 var form = $("form[name=fileForm]"); 
 var options = {  
	url:'/upload', //上传文件的路径  
 	type:'post',
	success:function(data){  
  		console.log(data); 
 	    //异步上传成功之后的操作
 	 }
 };  
 form.ajaxSubmit(options); 
} 

附：图片格式转换

如果要实现预览，这个最简单，直接将下面得到的reader.result赋值给一个img标签就可显示，后台传的图片数据也直接把reader.result储存起来发过去就可以。

//将选择的图片转换为base64编码格式
$('input[type=file]').on{'change',function(){
	var reader=new FileReader();
 	reader.function(e){
		console.log( reader.result);  //或者 e.target.result都是一样的，都是base64码
	}  
	reader.readAsDataURL(this.files[0])
	//filses就是input[type=file]文件列表，files[0]就是第一个文件，这里就是将选择的第一个图片文件转化为base64的码
}    

/**
 * 将以base64的图片url数据转换为Blob文件格式
 * @param urlData 用url方式表示的base64图片
 */
function convertBase64UrlToBlob(urlData) {
    var bytes = window.atob(urlData.split(',')[1]); //去掉url的头，并转换为byte
    //处理异常,将ascii码小于0的转换为大于0
    var ab = new ArrayBuffer(bytes.length);
    var ia = new Uint8Array(ab);
    for(var i = 0; i < bytes.length; i++) {
        ia[i] = bytes.charCodeAt(i);
    }
    return new Blob([ab], {
        type: 'image/png'
    });
}