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 来获取文件上传的进度

HTML5实现图片上传与预览相关推荐

html5图片上传与预览实现
最近做项目需要用到图片上传与预览功能,由于是用于手机端,所以研究了下H5的实现方式. 图片预览首先,解决图片预览问题.在html5中,提供了FileReader来读取本地文件,使我们可以实现图片预览 ...
JS兼容各个浏览器的本地图片上传即时预览效果
JS兼容各个浏览器的本地图片上传即时预览效果很早以前在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...
input文件框选择本地图片后页面预览图片并获取图片长宽以及大小图片上传前预览
前面有转过一篇通过HTML5来实现图片上传前预览 ,现在借助FileReader也实现了这个需求.并且同时还可以获得图片的长宽相素以及图片文件的大小.demo如下: <html> < ...
js实现图片上传本地预览
演示地址:https://xibushijie.github.io/static/uploadImg.html <!DOCTYPE> <html><head>< ...
alert()的功能_前端实现简单的图片上传小图预览功能
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
DevExpress控件使用系列--ASPxUploadControl（图片上传及预览）
1.控件功能列表控件展示数据.弹框控件执行编辑操作.Tab控件实现多标签编辑操官方说明 2.官方示例 2.1 ASPxImage http:// ...
vue富文本编辑，编辑自动预览，单个图片上传不能预览的问题解决：
vue富文本编辑,编辑自动预览,单个图片上传不能预览的问题解决: 参考文章: (1)vue富文本编辑,编辑自动预览,单个图片上传不能预览的问题解决: (2)https://www.cnblogs.co ...
html之file标签 --- 图片上传前预览 -- FileReader
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
php+jquery实现图片上传预览_和拖动位置值,PHP教程：thinkphp jquery实现图片上传和预览效果...
<PHP教程:thinkphp jquery实现图片上传和预览效果>要点: 本文介绍了PHP教程:thinkphp jquery实现图片上传和预览效果,希望对您有用.如果有疑问,可以联系我 ...

HTML5实现图片上传与预览

HTML5实现图片上传与预览相关推荐

最新文章

热门文章