資訊專(zhuān)欄INFORMATION COLUMN
摘要：多圖片上傳這兩天用原生徒手?jǐn)]了個(gè)插件，寫(xiě)的不是很完美，在這里先介紹一下傳統(tǒng)的面向過(guò)程的寫(xiě)法，還有很多不足，希望多多指正使用到的技術(shù)使用對(duì)象更靈活操作需要發(fā)送的表單文件使用對(duì)象允許應(yīng)用程序異步操作本地文件將讀取的文件轉(zhuǎn)換為編碼的字符串文件讀取
Multi多圖片上傳
這兩天用原生徒手?jǐn)]了個(gè)插件，寫(xiě)的不是很完美，在這里先介紹一下傳統(tǒng)的面向過(guò)程的javascript寫(xiě)法，還有很多不足，希望多多指正
使用到的技術(shù)使用formDate對(duì)象：更靈活操作需要發(fā)送的表單文件
使用FileReader對(duì)象:允許web應(yīng)用程序異步操作本地文件
FileReader.readAsDataURL()將讀取的文件轉(zhuǎn)換為base64編碼的字符串
FileReader.onload()文件讀取時(shí)觸發(fā)該方法
FileReader.onerror()文件讀取錯(cuò)誤時(shí)觸發(fā)該方法
可以參考MDN提供的API https://developer.mozilla.org...
關(guān)鍵函數(shù)//onchange只有在文件發(fā)生改動(dòng)的時(shí)候會(huì)調(diào)用
inputFile.onchange = function(){
progress = {value:0,count:this.files.length};
for (var i = 0; i < this.files.length; i++)readerFile(this.files,i);
}
function readerFile(files,index){
var reader = new FileReader();
var currFile =files[index];
reader.readAsDataURL(currFile);
if(checkFile(currFile,5)){
reader.onload = function(e){
currFile.result = e.target.result;
fileData.push({ //格式整理
name:currFile.name,
type:currFile.type,
size:currFile.size,
lastModified:currFile.lastModified,
result:currFile.result
});
createDOM(currFile)
progress.value+=1;
var num = progress.value/progress.count*100;
if(progress.value>=progress.count){
console.log(fileData.length+"個(gè)文件已全部讀取完成!");
}
}
reader.onerror = function(){
console.log("文件上傳失敗!");
}
}
}
uploadBtn.onclick = function(){
formData = new FormData(formDom);
formData.set("files",JSON.stringify(fileData));
console.log(formData)
//封裝完成 暫無(wú)接口測(cè)試
ajax({
url:"",
type:"POST",
data:formData,
success:function(){
console.log("上傳成功")
},
error:function(){
console.log("上傳失敗")
}
})
}
function checkFile(currFile,max){
var isLegal = true;
if(["image/png","image/jpeg","image/jpg","image/gif"].indexOf(currFile.type)==-1){
console.log("文件類(lèi)型只允許：png、jpg、gif");
isLegal = false;
}
if(currFile.size > 2048*1024){
console.log("文件大小超出限制，最大允許 2 MB");
isLegal = false;
}
if(fileExists(currFile.name+currFile.lastModified)){
console.log(currFile.name+",文件重復(fù)");
isLegal = false;
}
if(fileData.length>=max){
console.log("文件數(shù)量超出，最多上傳"+max+"張圖片");
isLegal = false;
}
return isLegal;
}
function fileExists(checkFlag){
var isRepeat = false;
console.log(fileData)
fileData.forEach(function(f){
if(f.name + f.lastModified === checkFlag)isRepeat = true;
});
return isRepeat;
}
我這里是為了更直觀(guān)地看到上傳效果
function createDOM(currFile){
var img = new Image();
img.src = currFile.result;
var li = document.createElement("li");
li.appendChild(img);
ul.appendChild(li);
li.key = currFile.name + currFile.lastModified; //給每個(gè)縮略圖一個(gè)標(biāo)識(shí)
li.addEventListener("click",function(){
var _li = this; //標(biāo)識(shí)當(dāng)前l(fā)i元素
ul.removeChild(this);
fileData.forEach(function(f,i){
if(f.name+f.lastModified == _li.key)fileData.splice(i,1);
})
})
}
這里只做post的封裝
function ajax(options){
var defaultOptions = {
url:"",
type:"",
data:null,
dataType:"json",
success:function(){},
error:function(){}
}
options = Object.assign({},defaultOptions,options);
if(window.XMLHttpRequest){
var xhr = new XMLHttpRequest();
}else{
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status === 200){
options.success();
}else{
options.error();
}
}
}
xhr.open(options.type,options.url,true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=utf-8");
xhr.send(options.data);
}
以上的代碼是全部的js邏輯，如果想更直觀(guān)地看到效果，可將下面的html+css代碼進(jìn)行ctrl+v
/*css*/
好像有點(diǎn)多啊，這是我初步的代碼，封裝好的完整的代碼在我的github上
有興趣的可以去看看,大家多多批評(píng)
https://github.com/mqr123/too...
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/93988.html
摘要：然鵝，因?yàn)槭且蟼鞯狡吲＃龅搅丝缬虻膯?wèn)題，嘗試過(guò)網(wǎng)上的幾種解決方法，都沒(méi)用。一開(kāi)始以為是一下子上傳太多張的緣故，就把改為，然鵝還是會(huì)報(bào)錯(cuò)。。。 其實(shí)用這個(gè)組件之前，原先是想接著用webuploader的，畢竟用過(guò)了，比較熟悉，而且也很好用。然鵝，因?yàn)槭且蟼鞯狡吲?，遇到了跨域的?wèn)題，嘗試過(guò)網(wǎng)上的幾種解決方法，都沒(méi)用。只好用七牛文檔里面的plupload，hhhhhh，官方文檔推薦的，...
摘要：我用做狀態(tài)管理，七牛云做圖床。關(guān)于該組件的其他用法可以在的官方文檔查閱上傳對(duì)圖片進(jìn)行壓縮壓縮圖片的質(zhì)量對(duì)圖片進(jìn)行壓縮壓縮圖片實(shí)現(xiàn)起來(lái)比較簡(jiǎn)單。前端向后端請(qǐng)求上傳。 我用vuex做狀態(tài)管理，七牛云做圖床。 項(xiàng)目地址：多圖片上傳組件 效果展示 showImg(https://segmentfault.com/img/bVbocgG?w=960&h=516); 項(xiàng)目執(zhí)行流程 首先，讓我們來(lái)分...
摘要：網(wǎng)址功能單圖多圖上傳圖片上傳預(yù)覽上傳進(jìn)度條分組上傳，分組查詢(xún)新建分組，刪除分組刪除圖片選擇圖片目錄結(jié)構(gòu)前端利用搭建，中引入子組件。實(shí)現(xiàn)分組的新增查詢(xún)刪除。利用模塊實(shí)現(xiàn)刪除文件功能。 公司要寫(xiě)一些為自身業(yè)務(wù)量身定制的的組件，要基于Vue,寫(xiě)完后擴(kuò)展了一下功能，選擇寫(xiě)圖片上傳是因?yàn)樽约褐耙恢睂?duì)這個(gè)功能比較迷糊，所以這次好好了解了一下。演示在網(wǎng)址打開(kāi)后的show.gif中。 使用技術(shù)：Vu...
摘要：哈哈主要還是我嫌麻煩四上傳圖片這里的頁(yè)面樣式，圖片壓縮和預(yù)覽都和上面一樣，這里我主要配置一下的，讓接口能夠成功上傳。如果想讓用戶(hù)有更好的體驗(yàn)，可以對(duì)圖片進(jìn)行一下壓縮和本地預(yù)覽。 一、通過(guò)Form表單提交上傳 HTML enctype屬性必不可少 上面一種方法通過(guò)表單自有屬性進(jìn)行提交，看似簡(jiǎn)單，但是也有其最大的缺點(diǎn)，那就是提交...
摘要：哈哈主要還是我嫌麻煩四上傳圖片這里的頁(yè)面樣式，圖片壓縮和預(yù)覽都和上面一樣，這里我主要配置一下的，讓接口能夠成功上傳。如果想讓用戶(hù)有更好的體驗(yàn)，可以對(duì)圖片進(jìn)行一下壓縮和本地預(yù)覽。 一、通過(guò)Form表單提交上傳 HTML enctype屬性必不可少 上面一種方法通過(guò)表單自有屬性進(jìn)行提交，看似簡(jiǎn)單，但是也有其最大的缺點(diǎn)，那就是提交...
閱讀 3608·2020-12-03 17:42
閱讀 2779·2019-08-30 15:54
閱讀 2233·2019-08-30 15:44
閱讀 579·2019-08-30 14:08
閱讀 980·2019-08-30 14:00
閱讀 1116·2019-08-30 13:46
閱讀 2797·2019-08-29 18:33
閱讀 2939·2019-08-29 14:11
