css css3 ajax图片上传

一、实现图片上传 1、html

2、css

/*上传图片插件的样式*/

.img-box {

margin-top: 40px;

}

.img-box .up-p {

margin-bottom: 20px;

font-size: 16px;

color: #555;

}

.z_photo {

/*padding: 18px;

border:2px dashed #E7E6E6;*/

width: 100%;

padding: 0;

/*padding: 18px;*/

padding-top: 0.4rem;

}

.z_photo .z_file {

position: relative;

float: left;

}

.z_file .file {

width: 1.3rem;

height: 1.3rem;

opacity: 0;

position: absolute;

top: 0px;

left: 0px;

z-index: 100;

}

.z_photo .up-section {

position: relative;

/*margin-right: 20px;

margin-bottom: 20px;*/

}

.up-section .close-upimg {

position: absolute;

top: -0.1rem;

right: -0.1rem;

display: block;

z-index: 10;

width: 0.5rem;

}

.up-section .up-span {

display: block;

width: 1.4rem;

width: 1.4rem;

visibility: hidden;

position: absolute;

top: 0px;

left: 0px;

z-index: 9;

background: rgba(0, 0, 0, .5);

}

.up-section:hover {

border: 2px solid #f15134;

}

.up-section:hover .close-upimg {

display: block;

}

.up-section:hover .up-span {

visibility: visible;

}

.z_photo .up-img {

display: block;

width: 1.4rem;

height: 1.4rem;

}

.loading {

border: 1px solid #D1D1D1;

background: url(../img/loading.gif) no-repeat center;

}

.up-opcity {

opacity: 0;

}

.img-name-p {

display: none;

}

.upimg-div .up-section {

width: 1.4rem;

height: 1.4rem;

float: left;

margin-left: 0.1rem;

margin-bottom: 0.1rem;

}

.img-box .upimg-div .z_file {

width: 1.4rem;

height: 1.4rem;

}

.z_file .add-img {

display: block;

width: 1.4rem;

height: 1.4rem;

}

#modal-overlay2,

#modal-overlay {

visibility: hidden;

position: absolute;

/* 使用绝对定位或固定定位 */

left: 0px;

top: 0px;

width: 100%;

height: 100%;

text-align: center;

z-index: 1000;

background: rgba(51, 51, 51, .6);

/*background:ragb(51,51,51,.6);*/

/* 背景半透明 */

}

/* 模态框样式 */

.modal-data {

width: 84%;

margin: auto;

background-color: #fff;

/*border:1px solid #000;*/

padding: 0.3rem 0.15rem;

text-align: center;

margin-top: 1.5rem;

border-radius: 0.14rem;

height: 4.5rem;

}

.btncon {

display: flex;

align-items: center;

padding-top: 0.7rem;

width: 100%;

}

3、上传js

enter_imgTotal =[]; //上传的图片arr

var fileList = [];

var imgArr = [];

// 图片上传*****************************************

var delParent;

var defaults = {

fileType: ["jpg", "png", "bmp", "jpeg"], // 上传文件的类型

fileSize: 1024 * 1024 * 10 // 上传文件的大小 10M

};

/*点击图片的文本框*/

$(".file").change(function() {

var idFile = $(this).attr("id");

var file = document.getElementById(idFile);

var imgContainer = $(this).parents(".z_photo"); //存放图片的父亲元素

fileList = file.files; //获取的图片文件

var simg = $('#file').val();

// imgval=file;

// console.log('')

var input = $(this).parent(); //文本框的父亲元素

imgArr = [];

//遍历得到的图片文件

var numUp = imgContainer.find(".up-section").length;

var totalNum = numUp + fileList.length; //总的数量

if(fileList.length > 100 || totalNum > 100) {

alert("上传图片数目不可以超过100个，请重新选择"); //一次选择上传超过5个 或者是已经上传和这次上传的到的总数也不可以超过5个

} else if(numUp < 100) {

fileList = validateUp(fileList);

enter_imgTotal.push(fileList);

console.log('fileList', fileList);

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

var imgUrl = window.URL.createObjectURL(fileList[i]);

imgArr.push(imgUrl);

var $section = $("

");

imgContainer.prepend($section);

var $span = $("");

$span.appendTo($section);

var $img0 = $("").on("click", function(event) {

event.preventDefault();

event.stopPropagation();

$(".works-mask").show();

delParent = $(this).parent();

});

$img0.attr("src", "img/a7.png").appendTo($section);

var $img = $("");

$img.attr("src", imgArr[i]);

$img.appendTo($section);

var $p = $("

");

$p.html(fileList[i].name).appendTo($section);

var $input = $("");

$input.appendTo($section);

var $input2 = $("");

$input2.appendTo($section);

}

console.log('tupian', fileList);

}

setTimeout(function() {

$(".up-section").removeClass("loading");

$(".up-img").removeClass("up-opcity");

}, 450);

numUp = imgContainer.find(".up-section").length;

if(numUp >= 100) {

$(this).parent().hide();

}

//input内容清空

$(this).val("");

});

$(".z_photo").delegate(".close-upimg", "click", function() {

$(".works-mask").show();

delParent = $(this).parent();

});

$(".wsdel-ok").click(function() {

$(".works-mask").hide();

var numUp = delParent.siblings().length;

var aa = delParent.index();

var delimg_index = enter_imgTotal[0].length - aa - 1;

console.log('删除', delimg_index, enter_imgTotal);

enter_imgTotal[0].splice(delimg_index, 1); //删除掉数组对应的图片

console.log('del后', enter_imgTotal)

if(numUp < 101) {

delParent.parent().find(".z_file").show();

}

delParent.remove();

});

$(".wsdel-no").click(function() {

$(".works-mask").hide();

});

function validateUp(files) {

var arrFiles = []; //替换的文件数组

for(var i = 0, file; file = files[i]; i++) {

//获取文件上传的后缀名

var newStr = file.name.split("").reverse().join("");

if(newStr.split(".")[0] != null) {

var type = newStr.split(".")[0].split("").reverse().join("");

console.log(type + "===type===");

if(jQuery.inArray(type, defaults.fileType) > -1) {

// 类型符合，可以上传

if(file.size >= defaults.fileSize) {

alert(file.size);

alert('您这个"' + file.name + '"文件大小过大');

} else {

// 在这里需要判断当前所有文件中

arrFiles.push(file);

}

} else {

alert('您这个"' + file.name + '"上传类型不符合');

}

} else {

alert('您这个"' + file.name + '"没有类型, 无法识别');

}

}

return arrFiles;

}

4、上传到服务器

var imgarr = []; //装url

console.log('enter_imgTotal', enter_imgTotal);

if(enter_imgTotal.length == 0) {

console.log('没有图片');

} else {

//循环上传的图片数组进行单个上传，上传完再放到一个数组

for(var i = 0; i < enter_imgTotal[0].length; i++) {

//单个图片上传

var formData = new FormData();

formData.append('file', enter_imgTotal[0][i]);

formData.append('openid', openid);

$.ajax({

type: "POST",

url: ApiUrl + "地址/upload",

async: false,

beforeSend: function(request) {

request.setRequestHeader("Authorization", '123');

},

data: formData,

cache: false, //上传文件不需要缓存

processData: false, // 告诉jQuery不要去处理发送的数据

contentType: false, // 告诉jQuery不要去设置Content-Type请求头

success: function(res) {

if(res.code == 200) {

console.log('res-url++++', res.url);

imgarr.push(res.url);

// num1 = num1 + 1;

// console.log('num1', num1)

}

},

error: function() {

alert(res.message)

}

});

}

}

好文推荐

评论可见，请评论后查看内容，谢谢！！！

 您阅读本篇文章共花了：