文件上传的三种方式

方式

• input type='file'
• 拖拽
• 复制粘贴

方式一：input type='file'

html

<form>
    <input type="file" id="file" name="fileInput">
</form>

javascript

$("#file").on("change", function() {
    let file = this.files[0]
    let fileReader = new FileReader(),
    fileType = file.type;
    fileReader.onload = function() {
        if (/^image/.test(fileType)) {
            // 读取结果在fileReader.result里面
            $(`<img src="${this.result}">`).appendTo("body");
        }
    }
    // base64方式读取
    fileReader.readAsDataURL(file); 
    
    // 准备上传的formData数据
    let formData = new FormData();
    formData.append("file", file);  
})

方式二：拖拽

html

<div class="img-container">
    drop your image here
</div>

javascript

$(".img-container").on("dragover", function (event) {
    event.preventDefault();
})

.on("drop", function(event) {
    event.preventDefault();
    // 数据在event的dataTransfer对象里
    let file = event.originalEvent.dataTransfer.files[0];

    // 然后就可以使用FileReader进行操作
    fileReader.readAsDataURL(file);

    // 添加到一个FormData
    let formData = new FormData();
    formData.append("file", file);
})

方式三：粘贴

它新建了一个img标签，并把img的src指向一个blob的本地数据 html

<div id="editor" contenteditable="true">
      hello, paste your image here
 </div>

javascript

$("#editor").on("paste", function(event) {
    let file = event.originalEvent.clipboardData.files[0];
})
// FileReader方式
function readBlob(blobImg) {
    let fileReader = new FileReader();
    fileReader.onload = function() {
        console.log(this.result);
    }
    fileReader.onerror = function(err) {
        console.log(err);
    }
    fileReader.readAsDataURL(blobImg);
}
// createObjectURL方式
function readBlob(blobImg) {
    let urlCreator = window.URL || window.webkitURL;
    // 得到base64结果
    let imageUrl = urlCreator.createObjectURL(this.response);
    return imageUrl;
}