H5 图片上传

Posted 2020-12-26 huancheng

1.h5 图片异步上传

 （1） 异步上传input触发onchange事件的时候，就把图片上传至服务器。后台可能会返回图片的链接等信息，前台可以把图片信息展示给用户看。

 （2） 另一种情况可能需要前台自己重写提交（如下图）: 显示图片的时候，添加一个type=‘hidden‘的input框，用来存后台需要提交的东西（后台会返回，只需要用input存起来）

  

2.h5 图片同步上传

  （1） 同步上传。把图片获取，预览出来。然后在提交服务器

（代码）

 

/**
* tinyImgUpload
* @param ele [string] [生成组件的元素的选择器]
* @param options [Object] [对组件设置的基本参数]
* options具体参数如下
* path 图片上传的地址路径 必需
* onSuccess(res) 文件上传成功后的回调 参数为返回的文本 必需
* onFailure(res) 文件上传失败后的回调 参数为返回的文本 必需
* @return [function] [执行图片上传的函数]
* 调用方法
* tinyImgUpload(‘div‘, options)
*/
function tinyImgUpload(ele, options) {
// 判断容器元素合理性并且添加基础元素
var eleList = document.querySelectorAll(ele);
if(eleList.length == 0){
console.log(‘绑定的元素不存在‘);
return;
}else if(eleList.length>1){
console.log(‘请绑定唯一元素‘);
return;
}else {
eleList[0].innerhtml =‘<div id="img-container" >‘+
‘<div class="img-up-add img-item"> dsafa<span class="img-add-icon">+</span> </div>‘+
‘<input type="file" name="files" id="img-file-input" multiple>‘+
‘</div>‘;
var ele = eleList[0].querySelector(‘#img-container‘);
ele.files = []; // 当前上传的文件数组
}

// 为添加按钮绑定点击事件，设置选择图片的功能
var addBtn = document.querySelector(‘.img-up-add‘);
addBtn.addEventListener(‘click‘,function () {
document.querySelector(‘#img-file-input‘).value = null;
document.querySelector(‘#img-file-input‘).click();
return false;
},false)

// 预览图片
//处理input选择的图片
function handleFileSelect(evt) {
var files = evt.target.files;

for(var i=0, f; f=files[i];i++){
// 过滤掉非图片类型文件
if(!f.type.match(‘image.*‘)){
continue;
}
// 过滤掉重复上传的图片
var tip = false;
for(var j=0; j<(ele.files).length; j++){
if((ele.files)[j].name == f.name){
tip = true;
break;
}
}
if(!tip){
// 图片文件绑定到容器元素上
ele.files.push(f);

var reader = new FileReader();
reader.onload = (function (theFile) {
return function (e) {
var oDiv = document.createElement(‘div‘);
oDiv.className = ‘img-thumb img-item‘;
// 向图片容器里添加元素
oDiv.innerHTML = ‘<img class="thumb-icon" src="‘+e.target.result+‘" />‘+
‘<a href="javscript:;" class="img-remove">x</a>‘

ele.insertBefore(oDiv, addBtn);
};
})(f);

reader.readAsDataURL(f);
}
}
}
document.querySelector(‘#img-file-input‘).addEventListener(‘change‘, handleFileSelect, false);

// 删除图片
function removeImg(evt) {
if(evt.target.className.match(/img-remove/)){
console.log(‘3‘,ele.files);
// 获取删除的节点的索引
function getIndex(ele){

if(ele && ele.nodeType && ele.nodeType == 1) {
var oParent = ele.parentNode;
var oChilds = oParent.children;
for(var i = 0; i < oChilds.length; i++){
if(oChilds[i] == ele)
return i;
}
}else {
return -1;
}
}
// 根据索引删除指定的文件对象
var index = getIndex(evt.target.parentNode);
ele.removeChild(evt.target.parentNode);
if(index < 0){
return;
}else {
ele.files.splice(index, 1);
}
console.log(‘4‘,ele.files);
}
}
ele.addEventListener(‘click‘, removeImg, false);

// 上传图片
function uploadImg() {
console.log(ele.files);

var xhr = new XMLHttpRequest();
var formData = new FormData();

for(var i=0, f; f=ele.files[i]; i++){
formData.append(‘files‘, f);
}

console.log(‘1‘,ele.files);
console.log(‘2‘,formData);

xhr.onreadystatechange = function (e) {
if(xhr.readyState == 4){
if(xhr.status == 200){
options.onSuccess(xhr.responseText);
}else {
options.onFailure(xhr.responseText);
}
}
}

xhr.open(‘POST‘, options.path, true);
xhr.send(formData);

}
return uploadImg;
}