有滚动条，展示图的图片上传代码

2019-04-15 17:17发布

站内文章 / PIC单片机
10403 0 1389
 
  //图片上传 function uploadFile(){ var xhr ; var fileObj = document.getElementById("upload-file").files[0]; // 获取文件对象 var FileController = "../article/uploadPic"; // 接收上传文件的后台地址 if(fileObj){ var fileName=fileObj.name; var extStart=fileName.lastIndexOf("."); var ext=fileName.substring(extStart,fileName.length).toUpperCase(); if(ext!=".BMP"&&ext!=".PNG"&&ext!=".GIF"&&ext!=".JPG"&&ext!=".JPEG"){ layer.alert("图片限于png,gif,jpeg,jpg格式", { skin: 'layui-layer-molv' //样式类名 ,closeBtn:0 }); return; } var formDate = new FormData(); formDate.append("myFile", fileObj);// 文件对象 xhr = new XMLHttpRequest(); xhr.open("post", FileController, true); xhr.onload = function () { var d = eval("(" +xhr.responseText+ ")"); //把数据转成json $("#pic").attr("src","../"+d.path); //存储到进度条（data-picUrl）自定的属性里 $("#pic").attr("data-url",d.path); }; xhr.onerror = function(){ console.log("上传失败") }; //请求失败 xhr.upload.onprogress = function(evt){ if (evt.lengthComputable) {// var progress = Math.round(evt.loaded / evt.total * 100) + "%"; $(".progress-bar").css("width",progress); } }; xhr.upload.onloadstart = function(){//上传开始执行方法 $("#fileName").text(fileObj.name); }; xhr.send(formDate); }else{ layer.alert("请选择图片", { skin: 'layui-layer-molv' //样式类名 ,closeBtn:0 }); } }  

热门文章