下面是我在項目中用到的上傳三張圖片的代碼，項目中遇到的，所有寫了一個demo，還可以。不過這里沒有用壓縮，具體壓縮圖片代碼之后博客中再寫。如果有什么問題還請提出來。
pmjt.jpg
- HTML代碼
<div id="head-bar">
<div class="head-bar">
<div class="head-bar-back">
<a href="javascript:Dback('index.php');" data-direction="reverse"><img src="static/img/icon-back.png" width="24" height="24" /></a>
</div>
<div class="head-bar-title">舉報</div>
</div>
<div class="head-bar-fix"></div>
</div>
<div class="main">
<div class="report_content">
<form action="report_content.php?itemid={$itemid}&action={$action}" method="post" id="" class="" target="_self" enctype="multipart/form-data" onsubmit="return check();">
<div class="wrap">
<textarea name="report_c" rows="" cols="" id="content" value="" placeholder="請輸入舉報內容"></textarea>
<div class="img_upload">
<p class="i_title">證據截圖</p>
<div id='image-list' class="row image-list"> </div>
</div>
</div>
<input type="submit" value="提 交" class="submit_btn" name="submit" id="submit" />
</form>
</div>
</div>
- CSS代碼
.report{}
.report ul {background: #FFFFFF;width: 100%;}
.report ul li {line-height: 1.1rem;width: 100%;border-bottom: 1px solid #DDDDDD;}
.report ul li a{display: block;padding: 0rem 0.3rem;color: #333333;font-size: 0.3rem;}
.report ul li a:after{content: "";display: block;width: 0.5rem;height: 1.1rem;background: url(../img/icon-font.png) no-repeat;background-size: 0.5rem 0.5rem;background-position: center;float: right;}
.report_content .submit_btn{display: block;width: 6.7rem;height: 0.8rem;color: #FFFFFF;font-size: 0.3rem; border-radius: 0.1rem;line-height: 0.8rem;border: none;outline: none; margin:auto;background: url(../m/project_btn.png) no-repeat;background-size: 100% 100%;overflow: hidden;margin-top: 0.9rem;}
.report_content .wrap{padding: 0.2rem;width: 6.5rem;margin: auto;background: #FFFFFF;box-shadow: 0px 0px 8px rgba(0,0,0,.1);margin-top: 0.2rem;border-radius: 0.2rem;}
.report_content .wrap textarea{width: 100%;height: 4rem;margin-top: 0.2rem;border: none;resize: none;}
.report_content .img_upload{border-top: 1px solid #DDDDDD;height: 3rem;}
.report_content .i_title{color: #333333;font-size: 0.24rem;}
.report_content .i_title:after{content: "（最多上傳三張，可不上傳）";color: #B2B2B2;margin-left: 0.2rem;}
.report_content .img_upload{}
.report_content .img_upload .upload_box{width: 1.35rem;height: 1.35rem; display: inline-block;vertical-align: top;margin-right: 0.3rem; background: url(../m/paotui_project_icon.png) no-repeat;background-size: 3.9rem 6.4rem;background-position: -0.2rem -4.6rem;}
.report_content .img_upload .img-list li{width: 1.35rem;height: 1.35rem;display: inline-block;vertical-align: top;margin-right: 0.3rem;overflow: hidden;}
.image-list { width: 100%; height: 1.5rem; background-size: cover; padding: 0.1rem 0.1rem; overflow: hidden; }
.image-item.space { border: none; }
.image-item { width: 1.32rem; height: 1.32rem; background-image: url(../m/upload.png); background-repeat: no-repeat; background-size: 100% 100%; display: inline-block; position: relative; border-radius: 5px; margin-right: 10px; margin-bottom: 10px; border: solid 1px #e8e8e8; }
.image-item.space .image-close { display: none; }
.image-item .image-close { position: absolute; display: inline-block; right: -6px; top: -6px; width: 20px; height: 20px; text-align: center; line-height: 20px; border-radius: 12px; background-color: #FF5053; color: #f3f3f3; border: solid 1px #FF5053; font-size: 9px; font-weight: 200; z-index: 1; }
.image-item input[type="file"] { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 0; }
- JS代碼
(function(window, document, undefined) {
var get = function(id) {
return document.getElementById(id);
};
var qsa = function(sel) {
return [].slice.call(document.querySelectorAll(sel));
};
var ui = {
content:get('content'),
imageList: get('image-list'),
submit: get('submit')
};
ui.clearForm = function() {
ui.content.value = '';
ui.imageList.innerHTML = '';
ui.newPlaceholder();
};
ui.getFileInputArray = function() {
return [].slice.call(ui.imageList.querySelectorAll('input[type="file"]'));
};
ui.getFileInputIdArray = function() {
var fileInputArray = ui.getFileInputArray();
var idArray = [];
fileInputArray.forEach(function(fileInput) {
if (fileInput.value != '') {
idArray.push(fileInput.getAttribute('id'));
}
});
return idArray;
};
var imageIndexIdNum = 0;
ui.newPlaceholder = function() {
var fileInputArray = ui.getFileInputArray();
if (fileInputArray &&
fileInputArray.length > 0 &&
fileInputArray[fileInputArray.length - 1].parentNode.classList.contains('space')) {
return;
}
imageIndexIdNum++;
var placeholder = document.createElement('div');
placeholder.setAttribute('class', 'image-item space');
var closeButton = document.createElement('div');
closeButton.setAttribute('class', 'image-close');
closeButton.innerHTML = 'X';
closeButton.addEventListener('click', function(event) {
var _target = this.nextSibling;
//獲取到刪除的是第幾張圖
var _index = _target.getAttribute('name').slice(5);
var thumb1 = document.getElementById('image-1')?document.getElementById('image-1'):0;
var thumb2 = document.getElementById('image-2')?document.getElementById('image-2'):0;
var thumb3 = document.getElementById('image-3')?document.getElementById('image-3'):0;
switch (_index){
case '1':
if (thumb3!=0) {
thumb2.setAttribute('id','image-1');
thumb2.setAttribute('name','thumb1');
thumb3.setAttribute('id','image-2');
thumb3.setAttribute('name','thumb2');
imageIndexIdNum = 2;
}else if(thumb2!=0&&thumb3==0){
thumb2.setAttribute('id','image-1');
thumb2.setAttribute('name','thumb1');
imageIndexIdNum = 1;
}else{
imageIndexIdNum = 0;
}
break;
case '2':
if (thumb3!=0) {
thumb3.setAttribute('id','image-2');
thumb3.setAttribute('name','thumb2');
imageIndexIdNum = 2;
}else if(thumb2!=0&&thumb3==0){
imageIndexIdNum = 1;
}else{
imageIndexIdNum = 0;
}
break;
case '3':
imageIndexIdNum = 2;
break;
default:
break;
}
ui.newPlaceholder();
event.stopPropagation();
event.cancelBubble = true;
setTimeout(function() {
ui.imageList.removeChild(placeholder);
}, 0);
return false;
}, false);
var fileInput = document.createElement('input');
fileInput.setAttribute('type', 'file');
fileInput.setAttribute('name', 'thumb' + imageIndexIdNum);
fileInput.setAttribute('accept', 'image/*');
fileInput.setAttribute('id', 'image-' + imageIndexIdNum);
fileInput.addEventListener('change', function(event) {
var file = fileInput.files[0];
if (parseInt(file.size) > 3145728) {
Dtoast("圖片大小不能超過3M");
return false;
}
if (file) {
var reader = new FileReader();
reader.onload = function() {
//處理 android 4.1 兼容問題
var base64 = reader.result.split(',')[1];
var dataUrl = 'data:image/png;base64,' + base64;
//
placeholder.style.backgroundImage = 'url(' + dataUrl + ')';
}
reader.readAsDataURL(file);
placeholder.classList.remove('space');
var len = document.getElementsByClassName('image-item').length;
if (len == 3) {
return false;
}else{
ui.newPlaceholder();
}
}
}, false);
placeholder.appendChild(closeButton);
placeholder.appendChild(fileInput);
ui.imageList.appendChild(placeholder);
};
ui.newPlaceholder();
})(window, document, undefined);
