提交表单上传照片预览

项目名称：H_横店影视股份有限公司
访问地址：http://gz.gzwhir.com/hdysgf201708152001/zxtjl/index_29.aspx

具体效果：

上图是未上传状态

上图为传了照片之后

具体代码：
HTML：

<td rowspan="5" class="photo TD7" id="fileSelect"><div class="uploadbox"><input name="18240_0" id="18240_0" type="file" accept="image/*" class="uploadfile" onchange="domName='18240_0';loadImageFile();" /></div><div id="imagePreview_18240_0" class="photo"></div><span>点击上传照片</span></td>

JS：

<script type="text/javascript">var loadImageFile = (function () {if (window.FileReader) {var oPreviewImg = null, oFReader = new window.FileReader(),
rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;oFReader.onload = function (oFREvent) {var newPreview = document.getElementById("imagePreview_" + domName);//newPreview.innerHTML = "";oPreviewImg = new Image();//oPreviewImg.style.width = (newPreview.offsetWidth).toString() + "px";//oPreviewImg.style.height = (newPreview.offsetHeight).toString() + "px";newPreview.appendChild(oPreviewImg);oPreviewImg.src = oFREvent.target.result;$("#fileSelect span").hide();  //图片预览之后隐藏文字};return function () {var aFiles = document.getElementById(domName).files;if (aFiles.length === 0) { return; }if (!rFilter.test(aFiles[0].type)) { alert("You must select a valid image file!"); return; }oFReader.readAsDataURL(aFiles[0]);}}if (navigator.appName === "Microsoft Internet Explorer") {return function () {//alert(document.getElementById(domName).value);document.getElementById("imagePreview_" + domName).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.getElementById(domName).value;$("#fileSelect span").hide();  //图片预览之后隐藏文字}}})();//点击表格模拟点击上传文件控件var fileSelect = document.getElementById("fileSelect"),fileElem = document.getElementById("18240_0");function myAddEvent(obj,ev,fn){if(obj.attachEvent){obj.attachEvent("on" + ev,fn);}else{obj.addEventListener(ev,fn,false);}}myAddEvent( fileSelect, "click" , function (e) {if (fileElem) {fileElem.click();}});
</script>

提交表单上传照片预览相关推荐

移动端上传照片预览+Draw on Canvas's Demo（解决 iOS 等设备照片旋转 90 度的 bug）...
背景: 本人的一个移动端H5项目,需求如下: 需求一:手机相册选取或拍摄照片后在页面上预览需求二:然后绘制在canvas画布上这里,我们先看一个demo(http://jsfiddle.net/q ...
js实现多图上传和预览(包含表单上传、ajax上传)
请在这里查看示例 ☞ h5Upload示例包含的知识点有:(仅考虑手机端,pc兼容性不清,建议使用jquery版本的) 1.浏览器自带的表单上传(页面会跳转) 2.ajax上传(异步刷新.自动上传. ...
php 表格导入excel插件,BootStrap Fileinput插件和表格插件相结合实现导入Excel数据的文件上传、预览、提交的步骤...
这篇文章主要介绍了BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传.预览.提交的导入Excel数据操作步骤,需要的朋友可以参考下 bootstrap ...
ajax上传图片并显示,Ajax实现图片上传并预览
效果见尾部. 最近在使用ThinkPHP5开发项目中客户有一个需求是在图片上传时附带预览功能.虽然现在有很多的插件能实现,但是还是觉得自己写比较好.我们知道,图片上传需要一个input:file表单 ...
Ajax实现图片上传并预览
效果见尾部. 最近在使用ThinkPHP5开发项目中客户有一个需求是在图片上传时附带预览功能.虽然现在有很多的插件能实现,但是还是觉得自己写比较好.我们知道,图片上传需要一个input:file表单 ...
XX健康:预约管理-套餐管理图片上传与预览Redis实现定时清理垃圾图片
1. 新增套餐 1.1 需求分析套餐其实就是检查组的集合,例如有一个套餐为"入职体检套餐",这个体检套餐可以包括多个检查组:一般检查.血常规.尿常规.肝功三项等.所以在添加套餐时 ...
微信小程序基于vant和springboot实现附件上传和预览
前言图片上传和预览在移动端应用非常广泛和频繁,vant组件库van-uploader组件已经帮我们实现了大部分功能,但是在系统中频繁使用还是有点麻烦,我们根据自身的业务系统重新封装了一下简化我们的开 ...
html ajax 图片上传,Ajax实现图片上传并预览功能
先给大家展示下效果图,大家感觉不错,请参考实现代码. 最近在使用ThinkPHP5开发项目中客户有一个需求是在图片上传时附带预览功能.虽然现在有很多的插件能实现,但是还是觉得自己写比较好.我们知道,图 ...
jQuery图片批量上传插件源码，支持批量上传、预览、删除、放大，可配置上传数量、上传大小、追加方式，含详细使用文档
jQuery图片批量上传插件源码,支持批量上传.预览.删除.放大,可配置上传数量.上传大小.追加方式,含详细使用文档程序包内含使用Demo 完整程序源代码:jQuery图片批量上传插件源码上传前 ...
[转]html5表单上传控件Files API
表单上传控件:<input type="file" />(IE9及以下不支持下面这些功能,其它浏览器最新版本均已支持.) 1.允许上传文件数量允许选择多个文件:< ...

提交表单上传照片预览

提交表单上传照片预览相关推荐

最新文章

热门文章