HTML5实现图片上传与预览

File API

File - 独立文件；提供只读信息，例如名称、文件大小、mimetype 和对文件句柄的引用。

FileList - File 对象的类数组序列（考虑多文件上传或者从桌面拖动目录或文件）。

Blob - 可将文件分割为字节范围。

FileReader - 读取File或Blob

URL scheme

检测浏览器是否支持

// 检测是否支持File API

if (window.File && window.FileReader && window.FileList && window.Blob) {

// 支持

} else {

alert(‘不支持’);

}

选取一张图片，并预览

.preview_box img {

width: 200px;

}

$("#img_input").on(“change”, function(e){

let file = e.target.files[0]; //获取图片资源// 只选择图片文件if (!file.type.match('image.*')) {return false;}let reader = new FileReader();reader.readAsDataURL(file); // 读取文件// 渲染文件reader.onload = function(arg) {let img = '<img class="preview" src="' + arg.target.result + '" alt="preview"/>';$(".preview_box").empty().append(img);}

});

上传到服务器

let form_data = new FormData();

let file_data = $("#img_input").prop(“files”)[0];

// 把上传的数据放入form_data

form_data.append(“user”, “hzzly”);

form_data.append(“img”, file_data);

$.ajax({

type: “POST”, // 上传文件要用POST

url: “”,

dataType : “json”,

crossDomain: true, // 如果用到跨域，需要后台开启CORS

processData: false, // 注意：不要 process data

contentType: false, // 注意：不设置 contentType

data: form_data

}).success(function(msg) {

console.log(msg);

}).fail(function(msg) {

console.log(msg);

});

拖拽上传

三个相关事件：

dragenter

dragover

drop

Drop files here // 必须阻止dragenter和dragover事件的默认行为，这样才能触发 drop 事件 function fileSelect(evt) {

evt.stopPropagation();evt.preventDefault();let files = evt.dataTransfer.files; // 文件对象let output = [];// 处理多文件for (let i = 0, f; f = files[i]; i++) {output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',f.size, ' bytes, last modified: ',f.lastModifiedDate.toLocaleDateString(), '</li>');}// 显示文件信息document.getElementById('list').innerHTML = output.join('');

}

function dragOver(evt) {

evt.stopPropagation();

evt.preventDefault();

evt.dataTransfer.dropEffect = ‘copy’;

}

// 监听器

let dropZone = document.getElementById(‘drop_zone’);

dropZone.addEventListener(‘dragover’, dragOver, false);

dropZone.addEventListener(‘drop’, fileSelect, false);

美化上传框

方法一： 在隐藏的文件输入框上调用click()方法

隐藏掉默认的的文件输入框

元素，使用自定义的界面来充当打开文件选择对话框的按钮。要使用样式display:none把原本的文件输入框隐藏掉，然后在需要的时候调用它的click()方法就行了。

选择文件 let fileSelect = document.getElementById("fileSelect"), fileElem = document.getElementById("fileElem");

fileSelect.addEventListener(“click”, function (e) {

if (fileElem) {

fileElem.click(); // jQuery可以使用 trigger()

}

e.preventDefault(); // prevent navigation to “#”

}, false);

方法二：用label

隐藏input，把样式写到label上，点击label就是对input进行操作。

选择文件

#img_input2 {

display: none;

}

#img_label2 {

background-color: #f2d547;

border-radius: 5px;

display: inline-block;

padding: 10px;

}

#preview_box2 img {

width: 200px;

}

$("#img_input2").on(“change”, function(e) {

let file = e.target.files[0]; //获取图片资源// 只选择图片文件if (!file.type.match('image.*')) {return false;}let reader = new FileReader();reader.readAsDataURL(file); // 读取文件// 渲染文件reader.onload = function(arg) {let img = '<img class="preview" src="' + arg.target.result + '" alt="preview"/>';$("#preview_box2").empty().append(img);}

});

使用Base64的方式,实现本地预览

if (window.FileReader) {

let oFileReader = new FileReader(),

oFile = e.target.files[0];

if (/^image*/.test(oFile.type)) {

oFileReader.onloadend = function (e) {

let binfo64 = e.target.result;

let postinfo = {

image: binfo64,

filename:passport-${new Date().getTime()}

}

};

oFileReader.readAsDataURL(oFile);

} else {

alert(‘传入图片文件’);

}

}

使用Ajax上传图片信息，并显示图片上传的进度

//绑定了`submit`事件。 $('#fileupload-form').on('submit',(function(e) { e.preventDefault(); //序列化表单 var serializeData = $(this).serialize();

// var formData = new FormData(this);$(this).ajaxSubmit({type:'POST',url: *yoururl*,dataType: 'json', data: serializeData, // data: formData,//attention!!! contentType: false,cache: false, processData:false,beforeSubmit: function() {//上传图片之前的处理 },uploadProgress: function (event, position, total, percentComplete){ //在这里控制进度条 },success:function(){},error:function(data){alert('上传图片出错');}});

}));

//绑定文件选择事件，一选择了图片，就让form提交。

$("#fileupload").on(“change”, function() {

$(this).parent().submit();

});

说明：

使用.serialize()获取表单的数据，不同通过val和text获取值

ajax上传图片这三个参数必须配置contentType: false, cache: false, processData:false

该处使用了uploadProgress 来获取文件上传的进度