js HTML5多圖片上傳及預覽實例解析（不含前端的文件分割）

2020-03-24 16:01:33

字體：大中小

來源：轉載

供稿：網友

本文實例為大家分享了js HTML5多圖片上傳及預覽實例，供大家參考，具體內容如下主要運用
1、HTML5 files可以選擇多文件，以及獲取多文件信息
2、XMLHTTPRequest對象，發送HTTP傳輸請求
3、將每一個文件放在FormData，進行傳輸
4、利用readAsDataURL將圖片內容直接變成url，放在img標簽的src當中，生成可預覽的圖片html+css+js代碼
!DOCTYPE html head meta http-equiv="Content-Type" content="text/html" charset="utf-8" / title test html FileReader /title style type="text/css" html,body,header,footer,div,ul,li,h1,h2,h3,h4,h5,h6,label,input,textarea,p,span,a{ padding: 0; margin: 0;img { border: 0;em,strong{ font-weight: normal; font-style: normal; list-style: none;h1,h2,h3,h4,h5,h6 { font-weight: normal; font-size: 100%;a,a:after{ text-decoration:none;.photo_wrap{ clear:both;.photo_wrap li{ margin:10px; width:150px; float:left;.photo_box { height:150px; width:150px; overflow:hidden; position:relative;.photo_box .img1{ height:150px;.photo_box .img2{ width:150px;.upload_result{ height:50px;.btns{ position:relative; height:40px; width:100px; float:left;.btn{ height:40px; line-height:40px; color:#FFF; display:block; border-radius:3px; text-align:center; background-color: #FF5581; /* Old browsers */ background-image: -moz-linear-gradient(top,#FA7B9C 0%, #FF5581 100%); /* FF3.6+ */ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FA7B9C), color-stop(100%,#FF5581)); /* Chrome,Safari4+ */ background-image: -webkit-linear-gradient(top,#FA7B9C 0%, #FF5581 100%); /* Chrome10+,Safari5.1+ */ background-image: -o-linear-gradient(top,#FA7B9C 0%, #FF5581 100%); /* Opera 11.10+ */ background-image: -ms-linear-gradient(top,#FA7B9C 0%, #FF5581 100%); /* IE10+ */ background-image: linear-gradient(to bottom,#FA7B9C 0%, #FF5581 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FA7B9C', endColorstr='#FF5581',GradientType=0 ); /* IE6-8 */ box-shadow:0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 2px rgba(0, 0, 0, 0.3);.btn_add_pic{ width:100px; position:absolute; top:0; left:0;.btn_upload{ width:100px; margin:0 10px 10px; float:left;.btn:hover,.btn_cur{ background-color: #FB99B1; /* Old browsers */ background-image: -moz-linear-gradient(top,#FB99B1 0%, #FF5581 100%); /* FF3.6+ */ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FB99B1), color-stop(100%,##FF5581)); /* Chrome,Safari4+ */ background-image: -webkit-linear-gradient(top,#FB99B1 0%, #FF5581 100%); /* Chrome10+,Safari5.1+ */ background-image: -o-linear-gradient(top,#FB99B1 0%, #FF5581 100%); /* Opera 11.10+ */ background-image: -ms-linear-gradient(top,#FB99B1 0%, #FF5581 100%); /* IE10+ */ background-image: linear-gradient(to bottom,#FB99B1 0%, #FF5581 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FB99B1', endColorstr='#FF5581',GradientType=0 ); /* IE6-8 */.file_input_wrap{ position:absolute; top:0; left:0; width:100px; height:40px;.file_input_wrap label{ width:100%; height:100%; display:block; opacity:0; cursor:pointer;.file_input_wrap input{ opacity:0; filter:alpha(opacity=0);/*ie8及以下*/ position:absolute; top:7px; right:173px; cursor:pointer; width:95px;.photo_box .icon_pos{ height:20px; width:20px; display:block; position:absolute; right:0; bottom:0;.photo_box .loading{ height:10px; display:block; position:absolute; left:0; bottom:0; background-image:url(loading.gif);.sucess_icon{ background-image:url(icons_01.png); background-position:0 0;.error_icon{ background-image:url(icons_01.png); background-position:-20px 0; /style /head body div a id="J_add_pic" href="javascript:;" 添加圖片 /a div input type="file" id="file" name="file" accept="image/*" multiple onChange="fileInfo(this)" / label id="J_add_area" /label /div /div a id="J_upload" href="javascript:;" 開始上傳 /a div id="J_photo_wrap" /ul /div /body script type="text/javascript" src="jquery-1.7.2.min.js" /script script type="text/javascript" var img_index = new Array(); function upload_img(){ var j=0; img(); function img(){ //1.創建XMLHTTPRequest對象 if (img_index.length 0){ var singleImg = img_index[j]; var xmlhttp; if (window.XMLHttpRequest) { //IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest; //針對某些特定版本的mozillar瀏覽器的bug進行修正 if (xmlhttp.overrideMimeType) { xmlhttp.overrideMimeType('text/xml'); } else if (window.ActiveXObject){ //IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); if(xmlhttp.upload){ //進度條 xmlhttp.upload.addEventListener("progress", function(e) { if (e.lengthComputable) { var load_percent = (e.loaded / e.total) * 100; $('#J_photo_wrap ul li').eq(j).find('.loading').css('width',load_percent+'%'); false); //2.回調函數 //onreadystatechange是每次 readyState 屬性改變的時候調用的事件句柄函數 xmlhttp.onreadystatechange = function(e){ if(xmlhttp.readyState==4){ if(xmlhttp.status==200){ var json = eval('(' + xmlhttp.responseText + ')'); if(json.status == 1){ $('#J_photo_wrap ul li').eq(j).find('.upload_result').text(singleImg.name+'上傳完成'); $('#J_photo_wrap ul li').eq(j).find('.loading').hide(); $('#J_photo_wrap ul li').eq(j).find('.icon_pos').addClass('sucess_icon'); }else{ $('#J_photo_wrap ul li').eq(j).find('.upload_result').text(singleImg.name+'上傳失敗'); $('#J_photo_wrap ul li').eq(j).find('.loading').hide(); $('#J_photo_wrap ul li').eq(j).find('.icon_pos').addClass('error_icon'); }else{ $('#J_photo_wrap ul li').eq(j).find('.upload_result').text(singleImg.name+'上傳失敗'); $('#J_photo_wrap ul li').eq(j).find('.loading').hide(); $('#J_photo_wrap ul li').eq(j).find('.icon_pos').addClass('error_icon'); if (j img_index.length - 1) { j++; img(); //3.設置連接信息 //初始化HTTP請求參數，但是并不發送請求。 //第一個參數連接方式，第二是url地址,第三個true是異步連接，默認是異步 //使用post方式發送數據 xmlhttp.open("POST","upload.php",true); //4.發送數據，開始和服務器進行交互 //發送 HTTP 請求，使用傳遞給 open() 方法的參數，以及傳遞給該方法的可選請求中如果true, send這句話會立即執行 //如果是false（同步），send會在服務器數據回來才執行 //get方法在send中不需要內容 var formdata = new FormData(); formdata.append("FileData", singleImg); xmlhttp.send(formdata); $('#J_upload').click(function(){ upload_img(); $('#J_add_area').hover( function(){ $('#J_add_pic').addClass('btn_cur'); function(){ $('#J_add_pic').removeClass('btn_cur'); $('#J_add_area').click(function(){ $('#file').click(); function resize(img){ if(img.offsetHeight img.offsetWidth){ $(img).removeClass('img1').addClass('img2'); }else{ $(img).removeClass('img2').addClass('img1'); function fileInfo(source){ var ireg = /image//.*/i; var files = source.files; var name,size,type; for(var i = 0, f; f = files[i]; i++) { name = f.name; size = f.size; type = f.type; if(!type.match(ireg)) { $('#J_photo_wrap ul').append(' li div '+name+'不是圖片 span /span span /span /div div /div /div /li }else{ img_index.push(f); if(size 1048576){ $('#J_photo_wrap ul').append(' li div '+name+'太大，無法生成預覽 span /span span /span /div div /div /li }else{ if(window.FileReader) { var fr = new FileReader(); fr.onload = (function(f) { return function(e){ $('#J_photo_wrap ul').append(' li div img onload="resize(this);" src="'+this.result+'"/ span /span span /span /div div /div /li })(f); fr.readAsDataURL(f); /script /html php收到文件的代碼（這里只獲取文件名字、類型、大小，沒有進行其它操作） $name = $_FILES['FileData']['name']; $type = $_FILES['FileData']['type']; $size = $_FILES['FileData']['size']; $return = array ( "name" = $name, "type" = $type, "size" = $size, "status" = 1 $return = json_encode($return); echo $return;存在的問題
1、為了生成縮略圖，readAsDataURL讀取文件內容會占用內存，所以大圖片會造成瀏覽器卡住或者奔潰
2、上傳沒有進行分段處理以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持phpstudy。更多編程語言

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：JS HTML5實現拖拽移動列表效果

下一篇：js+html5操作sqlite數據庫的方法