js 图片 mysql_用js上传图片到数据库,在数据库只显示图片名

已结贴√

问题点数:20 回复次数:5

ca56232b3bbedf9a539d07f37fffb99a.gif

3144d8b7615c79d9f638db40d5689d26.gif

a218af6549b45ee526caf607ebff1358.gif

0f8df0e29816ae721419de940fb833d1.gif

用js上传图片到数据库,在数据库只显示图片名

下面是js代码 ,求大神看看

$(function(){

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"); //存放图片的父亲元素

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

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

var imgArr = [];

//遍历得到的图片文件

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

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

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

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

}

else if(numUp < 5){

fileList = validateUp(fileList);

for(var i = 0;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);

}

}

setTimeout(function(){

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

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

},450);

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

if(numUp >= 5){

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

}

});

$(".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;

if(numUp < 6){

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;

}

})


版权声明:本文为weixin_39843847原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。