HTML5連續(xù)上傳圖片
/*
by 的雨
time:2016/11/17
*/
function update_object()
{
//這是在實例化的時候，同時調(diào)用int方法
this.int.apply(this,arguments);
}
//這是原型鏈 == 一個對象
update_object.prototype={
int:function(options)
{
//這是接收從調(diào)用的時候傳過來參數(shù)
this.CC=options.CC;
this.tishi=options.tishi;
this.BB=options.BB;
this.show=options.show;
this.myfile=options.myfile;
this.array=[];
var that=this;
this.btn=options.btn;
this.myfile.onchange=function() //input發(fā)生改變的時候觸發(fā)（onchange事件）
{
//第一步驟，這個步驟是找到file，即上傳的文件
var files = this.files;
/*
concat() 方法用于連接兩個或多個數(shù)組。 把that.filter(files)添加到that.array，這樣that.array就會不斷的保存file數(shù)組
該方法不會改變現(xiàn)有的數(shù)組，而僅僅會返回被連接數(shù)組的一個副本。
*/
that.array=that.array.concat(that.filter(files));
that.Index();
return this;
}
//這是點擊上傳的步驟
this.btn.onclick=function(e)
{
that.array;
var e=e||event;
e.preventDefault();
//點擊的同時調(diào)用上傳的方法
that.upload();
}
},
//第二步驟，這是過濾file的步驟，這一步在concat之前就調(diào)用
filter: function(files) {
var arrFiles=[];
for (var i = 0, file; file = files[i]; i++) {
if (file.type.indexOf("p_w_picpath") == 0) {
//if (file.size >= 512000) {
//// alert('您這張"'+ file.name +'"圖片大小過大，應(yīng)小于500k');
//} else {
arrFiles.push(file);
//}
} else {
alert('文件"' + file.name + '"不是圖片。');
}
}
return arrFiles ;
},
//第三步驟，這是為每個file添加索引,在concat連接之后調(diào)用，把之前的this.array的內(nèi)容改變了
Index: function() {
for (var i = 0, file; file = this.array[i]; i++) {
//增加唯一索引值
file.index = i;
}
//這里的this.array已經(jīng)有索引
this.onSelect(this.array);
return this;
},
//第四步驟，是生成img預(yù)覽和刪除預(yù)覽
onSelect: function(files) {
var that=this;
var html = '', i = 0;
//動態(tài)創(chuàng)建img和li
var show1 = function()
{
file = files[i];
if (file){
//var reader = new FileReader()
var URL=window.URL.createObjectURL(file)
//reader.onload = function(e)
//{
html+='<li ><div id="jindu">上傳成功</div><img id="pic_' + i + '" src='+URL+'><span id="name_'+ i +'" class="upload_append_list">'+file.name+'</span><a href="#" id="del" title="刪除" index="'+ i +'">×</a></li>';
//console.log(file);
i++;
show1();
that.show.style.display='block';
that.show.innerHTML=html;
//}
//reader.readAsDataURL(file);e.target.result
}
};
show1();
//這是刪除預(yù)覽，同時把已經(jīng)刪除的file的索引傳到下一個數(shù)組
var del=function()
{
if (this.show.hasChildNodes()) {
var Li=this.show.getElementsByTagName('li');
var length=this.show.childNodes.length;
for(var i=0;i<length;i++)
{
Li[i].onmouseover=function()
{
this.lastChild.style.display='block';
this.lastChild.onclick=function()
{
this.parentNode.parentNode.removeChild(this.parentNode);
var a=this.getAttribute("index"); //這一步找到索引，因為file和a索引都是一樣，找到a等于找到file
that.picdelete(files[a]); //這部分已經(jīng)是刪除的file，傳遞到下一個數(shù)組
}
}
Li[i].onmouseout=aa=function()
{
this.lastChild.style.display='none';
}
}
}
}
del();
},
//第五步驟，這是刪除選擇的file的步驟
picdelete:function(a)
{
var arr=[];
for(var i=0,file;file=this.array[i];i++)
{
if(a!==file) //遍歷this.array找到和a相同的，就不要把它保存到數(shù)組
{
arr.push(file);
}
}
this.array=arr; //把最后的file對象內(nèi)容重新賦值給this.array（已不是剛開始的那個值）
},
//第六步驟，這是上傳的
upload:function()
{
//this.array是對象，不是數(shù)組
var that=this;
var formData = new FormData(); //這是HTML5的上傳，能夠上傳圖片和文字
var aaaa
//這一步，把所有的this.array都轉(zhuǎn)換為二維數(shù)組,例file1,file2,file3,方便最后一步全部上傳，不用每循環(huán)一次就上傳一次
for (var i = 0, file; file = this.array[i]; i++) {
formData.append("file"+i,file); //要加i否則就會被覆蓋，只有最后一個值
//aaaa=i;console.log(i);
}
aaaa=aaaa+1;
var xhr = new XMLHttpRequest();
//這這部分是顯示上傳進(jìn)度條的
xhr.upload.onprogress=function(evt)
{
var lod=evt.loaded; //已經(jīng)上傳的大小
var to=evt.total; //總的大小
var per=Math.floor(((lod/to))*100)+"%";
that.tishi.style.display='block';
that.tishi.innerHTML='你上傳了'+(aaaa*Math.floor(((lod/to))))+'張照片；'+'已經(jīng)上傳'+per;
if(per=='100%')
{
var Li=that.show.childNodes;
for(var i=0;i<Li.length;i++)
{
Li[i].firstChild.style.display='block';
Li[i].onmouseover=function()
{
this.lastChild.style.display='none';
}
}
}
}
//接收后臺返回來的數(shù)據(jù)
xhr.onreadystatechange = function(){
if(xhr.readyState==4&&xhr.status==200){
console.log(xhr.responseText)
}
}
xhr.open('POST','check.php',true);
//xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(formData);
//傳過去的值，用$_FILES接受，相當(dāng)于直接表單提交
/*
步驟
1，先找到file文件，過濾后用新的數(shù)組連接成一個數(shù)組
2，為每個file添加一個i值。就是索引；
3，從得到索引的file遍歷處理，動態(tài)創(chuàng)建img
4，刪除事件，把選擇刪除的file傳遞到下一級
5，重新組合file組合，重新遍歷，不保存上級帶有刪除的file
6，最后得到的是確定要上傳的file組合，一般和開始的數(shù)組不一樣
*/
}
}這是調(diào)用的
創(chuàng)新互聯(lián)一直秉承“誠信做人，踏實做事”的原則，不欺瞞客戶，是我們最起碼的底線！ 以服務(wù)為基礎(chǔ)，以質(zhì)量求生存，以技術(shù)求發(fā)展，成交一個客戶多一個朋友！為您提供成都網(wǎng)站制作、成都網(wǎng)站設(shè)計、成都網(wǎng)頁設(shè)計、微信小程序開發(fā)、成都網(wǎng)站開發(fā)、成都網(wǎng)站制作、成都軟件開發(fā)、成都app開發(fā)是成都本地專業(yè)的網(wǎng)站建設(shè)和網(wǎng)站設(shè)計公司，等你一起來見證！
<script>
window.onload=function()
{
var CC=document.getElementById('cc');
var BB=document.getElementById('bb');
var tishi=document.getElementById('tishi');
var show=document.getElementById('show');
var myfile=document.getElementById('myfile');
var btn=document.getElementById('submit');
var update=new update_object(
{
CC:CC,
BB:BB,
tishi:tishi,
show:show,
myfile:myfile,
btn:btn
}
);
}
</script>
<form action="check.php" method="post" enctype="multipart/form-data"> <div id="aa"> <div id=bb> <label> <div id="cc" title="上傳圖片">上傳圖片</div> <input type="file" id="myfile" name='name[]' accept="p_w_picpath/jpeg,p_w_picpath/jpg,p_w_picpath/png,p_w_picpath/gif" multiple='true'> </label> </div> <div id="size"> <div id="tishi"> </div> <label> <div id="begin">開始上傳</div> <input id='submit' type="submit" value=""> </label> </div> <ul id="show"> </ul> </div> <input id='submit' type="submit" value="提交"> </form>
個人是新手，所以寫的代碼不規(guī)范，還請多多包涵。我也是在網(wǎng)上找了很久，找不到全是純JavaScript寫的，所以想把這篇，讓新手學(xué)習(xí)。
網(wǎng)站名稱：HTML5連續(xù)上傳圖片
文章路徑：http://muchs.cn/article48/jopjhp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計、用戶體驗、自適應(yīng)網(wǎng)站、網(wǎng)站制作、微信小程序、網(wǎng)站排名
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)
- 企業(yè)網(wǎng)站改版要保持之前優(yōu)化效果同時導(dǎo)入新的優(yōu)化方案 2021-07-26
- 為什么很多網(wǎng)站制作公司都極力的推薦H5進(jìn)行網(wǎng)站改版? 2022-11-09
- 網(wǎng)站改版的幾點建議 2021-01-09
- 營銷型網(wǎng)站改版改版應(yīng)注意什么? 2022-06-26
- 企業(yè)網(wǎng)站改版標(biāo)準(zhǔn)流程是什么樣的？ 2020-11-28
- 網(wǎng)站改版細(xì)節(jié)問題需考究 2016-11-01
- 在網(wǎng)站編輯中如何解決網(wǎng)站編輯器后臺內(nèi)容高度和頁面不一致?北京做網(wǎng)站,北京網(wǎng)站改版 2021-02-07
- 把改版影響控制在最小的網(wǎng)站改版注意事項 2013-10-17
- 網(wǎng)站改版需要避免的誤區(qū) 2021-12-14
- 網(wǎng)站改版的周期長不長，一般改版多長時間？ 2022-05-11
- 現(xiàn)在的網(wǎng)站改版需要注意哪些方面 2016-10-27
- seo網(wǎng)站改版有哪些注意事項 2023-04-29