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代码

待更新

js上传图片并实现预览相关推荐

vue本地上传并预览php,vue.js 实现图片本地预览裁剪压缩上传功能
以下代码涉及 Vue 2.0 及 ES6 语法. 目标纯 javascrpit 实现,兼容ie9及以上浏览器,在本地做好文件格式.长宽.大小的检测,减少浏览器交互. 现实是残酷的,为了兼容Ie9 还 ...
EasyUI上传图片，前台预览，后台读取
背景 Spring MVC + EasyUI 前台上传图片,并预览下面是jsp的内容,form表单 java <form id="upload_form" enctype= ...
java 上传图片，图片预览，2种方法
java 上传图片,图片预览,2种方法 1. 方法一:将图片上传到特定磁盘 html页面,form表单内容: <div class="layui-form-item"> ...
手机端html5展示pdf,pdf.js移动端展示预览打开pdf-pdfh5.js
pdf.js移动端展示预览打开pdf-pdfh5.js 本插件基于pdf.js和jQuery,可手势捏合缩放,支持懒加载(即分段加载). 2019.07.18更新:增加npm install pdfh ...
OSS上传图片无法在线预览的解决方案
OSS上传图片无法在线预览的解决方案参考文章: (1)OSS上传图片无法在线预览的解决方案 (2)https://www.cnblogs.com/tian874540961/p/12058544.h ...
php手机端多图预览上传,JS实现多图预览上传的实例代码
这篇文章主要介绍了JS实现多张图片预览同步上传功能的相关资料,需要的朋友可以参考下废话不多说了,直接给大家贴代码了,具体代码如下所示: /** * Created by liujing on 201 ...
使用pdf.js在移动端预览pdf文档
pdf.js 是一个技术原型主要用于在 HTML5 平台上展示 PDF 文档,无需任何本地技术支持. 在线演示地址:http://mozilla.github.com/pdf.js/web/viewe ...
模仿微信朋友圈图片浏览 js javascript 支持图片预览，滑动切换，双指缩放，图片缓存
模仿微信朋友圈图片浏览 js javascript 支持图片预览,滑动切换,双指缩放,图片缓存 2017年08月10日 12:11:38 阅读数:2311 previewImage-mobile 仿 ...
【iframe结合pdf.js实现pdf的预览/下载及打印功能】
iframe结合pdf.js实现pdf的预览/下载及打印 1.[下载pdf.js](http://mozilla.github.io/pdf.js/getting_started/#download) ...

js上传图片并实现预览

js上传图片预览

前端页面

单图片上传js

demo代码

多图上传js

demo代码

js上传图片并实现预览相关推荐

最新文章

热门文章