html图片上传自动清空,HTML5+表单新增、删除、预览、上传图片

第一种方法：表单提交，使用jquery的Ajax

.preview ul {

margin: 0;

padding: 0;

}

.preview ul li {

position: relative;

display: inline-block;

margin-top: 10px;

margin-bottom: 10px;

margin-right: 10px;

float: left;

list-style: none;

}

.preview ul li img {

width: 50px;

height: 50px;

border-radius: 5px;

}

.preview ul li input {

display: inline-block;

position: absolute;

width: 50px;

height: 50px;

left: 0;

top: 0;

opacity: 0;

}

.del {

display: inline-block;

position: absolute;

top:6px;

right: 0px;

width: 12px;

height: 2px;

background: #ED544D;

line-height: 0;

font-size: 0;

vertical-align: middle;

-webkit-transform: rotate(45deg);

}

.del:after {

content: "/";

display: block;

width: 12px;

height: 2px;

background: #ED544D;

-webkit-transform: rotate(-90deg);

}

图片预览上传

添加照片(选填)

0/4

• οnchange="setImagePreviews();" multiple="true" />

  

提交

mui.init({

swipeBack:true //启用右滑关闭功能

});

function submit(){

var formData = new FormData();

formData.append('name',name);

if(uploadfile.length>0){

for(var i=0;i

formData.append("upload", uploadfile[i]); // 文件对象

}

}

var url= ;

jQuery.ajax({

url: url,

type: 'post',

async: false,

contentType:false,

processData: false,

data:formData,

xhrFields: {

withCredentials: true

},

crossDomain: true,

success: function (data) {

console.log(JSON.stringify(data));

mui.toast("提交成功！",{ duration:'500', type:'div' });

},

error: function (error) {

console.log(JSON.stringify(error));

mui.toast('页面出错',{ duration:'500', type:'div' });

}

});

}

var uploadfile = [];

function setImagePreviews() {

var docObj = document.getElementById("file");

var piclength = uploadfile.length;

var fileList = docObj.files;

if((Number(piclength) + Number(fileList.length)) > 4) {

plus.nativeUI.alert('最多上传四张');

} else {

document.getElementById("picnum").innerText=Number(piclength) + Number(fileList.length)+'/4';

for(var i = 0; i < fileList.length; i++) {

uploadfile.push(docObj.files[i]);

var picid = Number(piclength) + Number(i);

var reader = new FileReader();

reader.readAsDataURL(docObj.files[i]);

reader.onload = function(e) {

// 图片base64化

var newUrl = this.result;

$(".preview ul").prepend("

");

};

}

}

}

function delImg(obj){

var list =document.getElementsByTagName('li');

for(var i=0;i

list[i].index=i;

}

var idx=2-obj.index;

var ul=obj.parentNode;

var btnArray=['是','否'];

plus.nativeUI.confirm("确定要删除此图?",function(e){

if(e.index==0){

ul.removeChild(obj);

uploadfile.splice(idx,1);

document.getElementById("picnum").innerText=Number(uploadfile.length)+'/4';

}

},{"buttons":btnArray})

}

第二种：使用plus.uploader

.dynamic_images ul {

margin: 0;

padding: 0;

}

.dynamic_images ul li {

position: relative;

display: inline-block;

margin-top: 10px;

margin-bottom: 10px;

margin-right: 10px;

float: left;

list-style: none;

}

.dynamic_images ul li img {

width: 50px;

height: 50px;

border-radius: 5px;

}

.del {

display: inline-block;

position: absolute;

top:6px;

right: 0px;

width: 12px;

height: 2px;

background: #ED544D;

line-height: 0;

font-size: 0;

vertical-align: middle;

-webkit-transform: rotate(45deg);

}

.del:after {

content: "/";

display: block;

width: 12px;

height: 2px;

background: #ED544D;

-webkit-transform: rotate(-90deg);

}

图片预览上传

添加照片(选填)

0/4

• 

提交

mui.init({

swipeBack:true //启用右滑关闭功能

});

function submit(){

var url= ;

var task = plus.uploader.createUpload( url,

{ method:"POST",blocksize:204800,priority:100 },

function ( t, status ) {

// 上传完成

if ( status == 200 ) {

wt.close();

console.log( "Upload success: " + JSON.stringify(t));

} else {

wt.close();

console.log( "Upload failed: " + JSON.stringify(status));

}

});

for(var i = 0; i < files.length; i++) {

var f = files[i];

task.addFile(f.path,{

key: f.name,

name:'upload',

});

}

task.addData('name',name);

task.start();

}

var files = [];

// 添加文件

var index = 1;

var newUrlAfterCompress;

function appendFile(p) {

files.push({

name: "uploadkey" + index,//这个值服务器会用到，作为file的key

path: p

});

index++;

}

function showActionSheet() {

if($(".dynamic_images ul li").length<5){

var bts = [{

title: "拍照"

}, {

title: "从相册选择"

}];

plus.nativeUI.actionSheet({

cancel: "取消",

buttons: bts

},

function(e) {

if (e.index == 1) {

getImage();

} else if (e.index == 2) {

galleryImgs();

}

}

);

}else{

plus.nativeUI.alert('最多上传四张图片!');

}

}

// 产生一个随机数

function getUid() {

return Math.floor(Math.random() * 100000000 + 10000000).toString();

}

//拍照

function getImage() {

var cmr = plus.camera.getCamera();

cmr.captureImage(function(p) {

plus.io.resolveLocalFileSystemURL(p, function(entry) {

var localurl = entry.toLocalURL(); //

$(".dynamic_images ul").prepend("

");

var dstname="_downloads/"+getUid()+".png";//设置压缩后图片的路径

newUrlAfterCompress=compressImage(localurl,dstname);

appendFile(dstname);

document.getElementById("picnum").innerText=files.length+'/4';

});

});

}

function galleryImgs() {

// 从相册中选择图片

var num=4;

if(5-$(".dynamic_images ul li").length>=1){

num=5-$(".dynamic_images ul li").length;

}

plus.gallery.pick(function(e) {

for (var i = 0; i < e.files.length; i++) {

$(".dynamic_images ul").prepend(

"

");

var dstname="_downloads/"+getUid()+".png";//设置压缩后图片的路径

newUrlAfterCompress=compressImage(e.files[i],dstname);

appendFile(dstname);

}

document.getElementById("picnum").innerText=files.length+'/4';

}, function(e) {

console.log("取消选择图片");

}, {

filter: "image",

multiple: true,

maximum:num,

system:false,

onmaxed:function(){

plus.nativeUI.alert('最多只能选择四张图片');

}

});

}

//压缩图片，这个比较变态的方法，无法return

function compressImage(src,dstname) {

//兼容

if (0 != src.toString().indexOf("file://")) {

src = "file://" + src;

}

plus.zip.compressImage({

src: src,

dst: dstname,

overwrite:true,

quality: 5

},

function(event) {

//console.log("Compress success:"+event.target);

return event.target;

},

function(error) {

console.log(error);

return src;

});

}

function delImg(obj)

{

var list =document.getElementsByTagName('li');

for(var i=0;i

list[i].index=i;

}

var idx=2-obj.index;

var ul=obj.parentNode;

var btnArray=['是','否'];

plus.nativeUI.confirm("确定要删除此图?",function(e){

if(e.index==0){

ul.removeChild(obj);

files.splice(idx,1);

document.getElementById("picnum").innerText=Number(files.length)+'/4';

}

},{"buttons":btnArray})

}