js HTML5多圖片上傳及預(yù)覽實(shí)例解析（不含前端的文件分割）
更新時(shí)間：2016年08月26日 14:55:33 作者：snow_finland
這篇文章主要詳細(xì)解析了js HTML5多圖片上傳及預(yù)覽實(shí)例，不含前端的文件分割，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js HTML5多圖片上傳及預(yù)覽實(shí)例，供大家參考，具體內(nèi)容如下
主要運(yùn)用
1、HTML5 files可以選擇多文件，以及獲取多文件信息
2、XMLHTTPRequest對(duì)象，發(fā)送HTTP傳輸請(qǐng)求
3、將每一個(gè)文件放在FormData，進(jìn)行傳輸
4、利用readAsDataURL將圖片內(nèi)容直接變成url，放在img標(biāo)簽的src當(dāng)中，生成可預(yù)覽的圖片
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;
}
ul {
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 class="btns">
<a class="btn btn_add_pic" id="J_add_pic" href="javascript:;">添加圖片</a>
<div class="file_input_wrap">
<input type="file" id="file" name="file" accept="image/*" multiple onChange="fileInfo(this)" />
<label id="J_add_area"></label>
</div>
</div>
<a class="btn btn_upload" id="J_upload" href="javascript:;">開始上傳</a>
<div id="J_photo_wrap">
<ul class="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.創(chuàng)建XMLHTTPRequest對(duì)象
if (img_index.length > 0){
var singleImg = img_index[j];
var xmlhttp;
if (window.XMLHttpRequest) {
//IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest;
//針對(duì)某些特定版本的mozillar瀏覽器的bug進(jìn)行修正
if (xmlhttp.overrideMimeType) {
xmlhttp.overrideMimeType('text/xml');
};
} else if (window.ActiveXObject){
//IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
};
if(xmlhttp.upload){
//進(jìn)度條
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.回調(diào)函數(shù)
//onreadystatechange是每次 readyState 屬性改變的時(shí)候調(diào)用的事件句柄函數(shù)
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.設(shè)置連接信息
//初始化HTTP請(qǐng)求參數(shù)，但是并不發(fā)送請(qǐng)求。
//第一個(gè)參數(shù)連接方式，第二是url地址,第三個(gè)true是異步連接，默認(rèn)是異步
//使用post方式發(fā)送數(shù)據(jù)
xmlhttp.open("POST","upload.php",true);
//4.發(fā)送數(shù)據(jù)，開始和服務(wù)器進(jìn)行交互
//發(fā)送 HTTP 請(qǐng)求，使用傳遞給 open() 方法的參數(shù)，以及傳遞給該方法的可選請(qǐng)求中如果true, send這句話會(huì)立即執(zhí)行
//如果是false（同步），send會(huì)在服務(wù)器數(shù)據(jù)回來才執(zhí)行
//get方法在send中不需要內(nèi)容
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 class="photo_box">'+name+'不是圖片<span class="loading"></span><span class="icon_pos"></span></div><div class="upload_result"></div></div></li>');
}else{
img_index.push(f);
if(size>1048576){
$('#J_photo_wrap ul').append('<li><div class="photo_box">'+name+'太大，無法生成預(yù)覽<span class="loading"></span><span class="icon_pos"></span></div><div class="upload_result"></div></li>');
}else{
if(window.FileReader) {
var fr = new FileReader();
fr.onload = (function(f) {
return function(e){
$('#J_photo_wrap ul').append('<li><div class="photo_box"><img onload="resize(this);" src="'+this.result+'"/><span class="loading"></span><span class="icon_pos"></span></div><div class="upload_result"></div></li>');
};
})(f);
fr.readAsDataURL(f);
}
}
}
}
};
</script>
</html>
php收到文件的代碼（這里只獲取文件名字、類型、大小，沒有進(jìn)行其它操作）
<?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讀取文件內(nèi)容會(huì)占用內(nèi)存，所以大圖片會(huì)造成瀏覽器卡住或者奔潰
2、上傳沒有進(jìn)行分段處理
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- HTML5 JS壓縮圖片并獲取圖片BASE64編碼上傳
- 基于HTML5+JS實(shí)現(xiàn)本地圖片裁剪并上傳功能
- JS HTML5拖拽上傳圖片預(yù)覽
- JS+HTML5實(shí)現(xiàn)上傳圖片預(yù)覽效果完整實(shí)例【測試可用】
- JS+html5實(shí)現(xiàn)異步上傳圖片顯示上傳文件進(jìn)度條功能示例
- 手機(jī)端 HTML5使用photoswipe.js仿微信朋友圈圖片放大效果
- js+html5繪制圖片到canvas的方法
- js HTML5 canvas繪制圖片的方法
- JavaScript+html5 canvas實(shí)現(xiàn)圖片破碎重組動(dòng)畫特效
- JS+HTML5實(shí)現(xiàn)圖片在線預(yù)覽功能
- javascript實(shí)現(xiàn)移動(dòng)端 HTML5 圖片上傳預(yù)覽和壓縮功能示例
相關(guān)文章
本篇文章主要介紹了淺談ES6 模板字符串的具體使用方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
js 獲取html5的data屬性實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨s 獲取html5的data屬性實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
預(yù)防解決你不知道的JavaScript正在泄漏內(nèi)存
這篇文章主要為大家介紹了你不知道的JavaScript正在泄漏內(nèi)存預(yù)防及解決方法實(shí)例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪<BR>2023-10-10
JS前端千萬級(jí)彈幕數(shù)據(jù)循環(huán)優(yōu)化示例
這篇文章主要為大家介紹了JS前端一千萬條彈幕數(shù)據(jù)循環(huán)優(yōu)化示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
JS頁面獲取 session 值，作用域和閉包學(xué)習(xí)筆記
這篇文章主要介紹了JS頁面獲取 session 值，作用域和閉包,結(jié)合具體實(shí)例形式分析了javascript與jsp交互獲取session值、函數(shù)作用域及閉包相關(guān)操作技巧,需要的朋友可以參考下2019-10-10
JS不同運(yùn)算符下隱式類型轉(zhuǎn)換的實(shí)現(xiàn)示例
隱式轉(zhuǎn)換就是自動(dòng)轉(zhuǎn)換,通常發(fā)生在一些數(shù)學(xué)運(yùn)算中,本文就來介紹一下JS不同運(yùn)算符下隱式類型轉(zhuǎn)換的實(shí)現(xiàn)示例,具有一定的參考價(jià)值,感興趣的可以了解一下2023-12-12
這篇文章主要介紹了如何用unescape反編碼得出漢字,需要的朋友可以參考下2014-04-04
layui table設(shè)置前臺(tái)過濾轉(zhuǎn)義等方法
今天小編就為大家分享一篇layui table設(shè)置前臺(tái)過濾轉(zhuǎn)義等方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
基于JavaScript實(shí)現(xiàn)電子簽名功能
這篇文章主要為大家詳細(xì)介紹了如何通過JavaScript實(shí)現(xiàn)簡單的電子簽名功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-11-11
JavaScript中使用構(gòu)造器創(chuàng)建對(duì)象無需new的情況說明
JS中創(chuàng)建對(duì)象可以直接使用直接量的方式，這里討論的是定義一個(gè)構(gòu)造器(function)的情況2012-03-03