JS上传文件和预览（单张和多张）

Section1单张上传和预览：

思路：用<input type="file"/> 触发onchange事件，取出e.target.files || e.target.dataTransfer.files, 将其转为window.createObjectURL(file)有效的url 写入<img src=""/>的src中就可以预览了。然后将这个url用new FormData().append("",url); 设置ajax的processData:false,contentType:false;就可以上传到后台了。

    请看代码：

    

<div class="facemain" id="facemain">
        <div class="viewface-container">
                <img class="viewfaceimg" id="viewfaceimg" src="../../../img/weixin/weixin-v2/faceimg-default.jpg"/>
        </div>

        <div class="faceupload-div">
                <label id="face_label" class="face-label"><input id="face_input" class="face-input" type="file">
                        拍照或选择相片
                </label>
                <span class="saveface-btn" id="saveface_btn">
                        保存
                </span>
        </div>
        <img class="face-closebtn" src="/newPage/img/weixin/weixin-v2/qcode-closebtn.png" @click.stop="closeFace"/>

</div>

js: