js上传图片预览
前端页面
<!--单图上传 start--><input type="file" accept="image/*" onchange="uploadImg(event,this)"><!--单图上传 end--><!--多图上传 start--><input type="file" multiple accept="image/*" onchange="uploadImg()"><!--多图上传 end-->
单图片上传js
var URL = window.URL || window.webkitURL || window.mozURL/*** 上传预览图片*/function uploadImg(file, currentObj) {if (file.files && file.files[0]) {var reader = new FileReader()reader.onload = function(evt) {file.base64 = evt.target.resultvar formFile = new FormData()// 获取当前dom文件属性var fileObj =currentObj instanceof HTMLElement? currentObj.files[0]: $(currentObj)[0].files[0]formFile.append('key', uploadFileKey)formFile.append('file', fileObj) //加入文件对象var data = formFile$.ajax({url: uploadFileUrl,data: data,type: 'POST',dataType: 'json',cache: false, //上传文件无需缓存processData: false, //用于对data参数进行序列化处理 这里必须falsecontentType: false, //必须success: function(result) {console.log(result)$(currentObj).siblings('input[type=hidden]').val(result.info.url)},error: function(err) {console.log(err)}})var tmpImg ='<img src="'+URL.createObjectURL(dataURItoBlob(file.base64)) +'" />';$(currentObj).siblings('.upload-list').empty().append(tmpImg).addClass('updateImg')}reader.readAsDataURL(file.files[0])}}
demo代码
<title>单图上传预览</title><style>.preview {width: 200px;height:200px;}.preview img {width: 100%;}</style></head><body><div class="container"><input type="file" accept="image/*" onchange="uploadImg(event,this)"><div class="preview"></div></div><script>var URL = window.URL || window.webkitURL || window.mozURLfunction uploadImg(e,dom) {var e = event || evar fileObj =dom instanceof HTMLElement? dom.files[0]: $(dom)[0].files[0]console.log(e)console.log(dom)var container = document.querySelector('.preview')var img = new Image()img.src = URL.createObjectURL(fileObj)img.onload = function() {container.appendChild(img)}}</script></body>
多图上传js
用vue写的，换成普通方法即可用
等同于
uploadImg:function(e){} => function uploadImg(e){}
uploadImg: function(e) {if(!this.maxImgLength) {return}var _this = thisvar files = e.target.files || e.dataTransfer.filesvar imgArr = []for(var i = 0; i < files.length; i++) {// fixme: 这里有一个作用域的问题，选择多张图片会只显示最后onload的一张图片// 用闭包方法修复(function(file){// console.log('file', file)if(!/^image/.test(file.type)) {$.alert('', '必须上传图片格式')return}var reader = new FileReader()var formData = new FormData()reader.onload = function() {file.base64 = this.resultformData.append('key', uploadFileKey)formData.append('file', file)// console.log(formData)// $.showLoading('玩命上传中')_this.imgPreview.push(URL.createObjectURL(file))// console.log('this.preview', _this.imgPreview)_this.postFile(formData).then(function(res) {// $.hideLoading()_this.imgList.push(res.info)// console.log(_this.imgList)})}reader.readAsDataURL(file)})(file[i])}},postFile: function(formData) {// console.log(formData)return new Promise(function(resolve, reject) {$.ajax({type: "POST",url: apiList.ossUpFile,processData: false,contentType: false,data: formData,dataType: "json",success: function (resp) {resolve(resp)}});}) }
demo代码
待更新
