简单获取input file 选中的图片,并在一个div的img里面赋值src实现预览图片(可实现多张图片上传和预览移除)
2017-03-03 10:52
781 查看
一,基本原理:
通过表单的input type="file"控件可以实现本地文件的选择,然后通过form表单提交到服务器端实现上传。注意此时表单需要添加内容属性: enctype="multipart/form-data",并且该form表单是post方式提交。示例一:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"> <title>上传图片预览示例一</title> <meta name="author" content="熊仔其人-2017年3月3日" /> <meta name="keywords" content="" /> <meta name="description" content="示例一展示了前端图片上传预览基本功能的实现" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> </head> <body> <form id="Form1" method="post" enctype="multipart/form-data"> <input id="file_upload" type="file" accept="image/jpeg,image/png,image/gif" /> <div class="image_container"> <img id="preview" style="height:130px;width:117px;border-width:0px;" /> </div> </form> <script type="text/javascript"> $(function () { $("#file_upload").change(function () { var $file = $(this); var fileObj = $file[0]; var windowURL = window.URL || window.webkitURL; var dataURL; var $img = $("#preview"); if (fileObj && fileObj.files && fileObj.files[0]) { dataURL = windowURL.createObjectURL(fileObj.files[0]); $img.attr('src', dataURL); } else { dataURL = $file.val(); var imgObj = document.getElementById("preview"); // 两个坑: // 1、在设置filter属性时,元素必须已经存在在DOM树中,动态创建的Node,也需要在设置属性前加入到DOM中,先设置属性在加入,无效; // 2、src属性需要像下面的方式添加,上面的两种方式添加,无效; imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)"; imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL; } }); }); </script> </body> </html>
示例一展示了前端图片上传预览基本功能的实现。其好处主要是选择本地图片在前端直接预览,而不需要先上传到服务器。缺点是该预览方式需要依赖浏览器兼容支持(目前实际测试IE7以上,Chrome 52以上,及Firefox 大多数浏览器都支持)。
二,实际运用多张图片上传和预览,可设置默认图片,且可移除选择
在实际运用中可能需要多张图片上传和预览,并且实现可移除选择,可以点击设置默认图片等功能。示例二:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"> <title>上传图片预览示例二</title> <meta name="author" content="熊仔其人-2017年3月3日" /> <meta name="keywords" content="" /> <meta name="description" content="实际运用多张图片上传和预览,可设置默认图片,且可移除选择" /> <style type="text/css"> .image_container { display: inline-block; float: left; } #tdRoomPicture a, .image_container a { text-align: center; vertical-align: middle; text-decoration: none; } a.addImg { width: 100px; height: 100px; line-height: 100px; display: inline-block; font-size: 50px; background-color: #dae6f3; } .image_container a.previewBox { background-color: #dae6f3; margin: 0 3px 0 0; display: none; /*display: inline-block;*/ } .image_container .delImg { position: absolute; color: #f00; margin: 0 0 0 84px; font-size: 16px; width: 16px; height: 16px; line-height: 16px; text-align: center; vertical-align: middle; background-color: #c3c3c3; } .defaultImg { border: 1px solid #f90303; } .defaultImg:before { content: "默认图片"; float: left; position: absolute; color: #f90303; font-size: 14px; } .defaultImg:after { content: ""; } </style> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> </head> <body> <form id="Form1" method="post" enctype="multipart/form-data"> <div id="tdRoomPicture"> <!--<div class="image_container" data-picId="1"> <input id="RoomInfo1_RoomPicture1" name="RoomInfo1_RoomPicture1" type="file" accept="image/jpeg,image/png,image/gif" style="display: none;" /> <input id="RoomInfo1_RoomPictureHidDefault1" name="RoomInfo1_RoomPictureHidDefault1" type="hidden" value="0" /> <a href="javascript:;" id="previewBox1" class="previewBox defaultImg"> <div class="delImg">×</div> <img id="preview1" style="height: 100px; width: 100px; border-width: 0px;" /> </a> </div>--> <a href="javascript:;" class="addImg" data-picid="0">+</a> </div> </form> <script type="text/javascript"> $(function () { var picId = 0; var pictureUploading = false; $("#Form1").delegate(".addImg", "click", function () { if (!!pictureUploading) return; pictureUploading = true; picId = parseInt($(this).attr("data-picId")); picId++; $(this).attr("data-picId", picId); $(this).before("<div class=\"image_container\" data-picId=\"" + picId + "\">" + "<input id=\"RoomInfo1_RoomPicture" + picId + "\" name=\"RoomInfo1_RoomPicture" + picId + "\" type=\"file\" accept=\"image/jpeg,image/png,image/gif\" style=\"display: none;\" />" + "<input id=\"RoomInfo1_RoomPictureHidDefault" + picId + "\" name=\"RoomInfo1_RoomPictureHidDefault" + picId + "\" type=\"hidden\" value=\"0\" />" + "<a href=\"javascript:;\" id=\"previewBox" + picId + "\" class=\"previewBox\">" + "<div class=\"delImg\">×</div>" + "<img id=\"preview" + picId + "\" style=\"height:100px;width:100px;border-width:0px;\" />" + "</a>" + "</div>"); $("#RoomInfo1_RoomPicture" + picId).change(function () { var $file = $(this); var fileObj = $file[0]; var windowURL = window.URL || window.webkitURL; var dataURL; $("#previewBox" + picId).css("display", "inline-block"); var $img = $("#preview" + picId); //var $img = $("#preview1"); if (fileObj && fileObj.files && fileObj.files[0]) { dataURL = windowURL.createObjectURL(fileObj.files[0]); $img.attr('src', dataURL); } else { dataURL = $file.val(); var imgObj = $img; //document.getElementById("preview"); // 两个坑: // 1、在设置filter属性时,元素必须已经存在在DOM树中,动态创建的Node,也需要在设置属性前加入到DOM中,先设置属性在加入,无效; // 2、src属性需要像下面的方式添加,上面的两种方式添加,无效; imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)"; imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL; } if (1 === picId) { defaultImg(picId, true); } pictureUploading = false; }); $("#RoomInfo1_RoomPicture" + picId).click(); //设置默认图片 $(".previewBox").click(function () { var _picId = parseInt($(this).parent(".image_container").attr("data-picId")); $(".image_container").each(function () { var i = parseInt($(this).attr("data-picId")); if (i === _picId) defaultImg(i, true); else defaultImg(i, false); }); }); //删除上传的图片 $(".delImg").click(function () { var _picId = parseInt($(this).parent().parent(".image_container").attr("data-picId")); $(".image_container[data-picid='" + _picId + "']").remove(); if ($(".image_container").length > 0 && $(".defaultImg").length < 1) { $(".image_container").each(function () { var i = parseInt($(this).attr("data-picId")); defaultImg(i, true); return false; }); } }); }); function defaultImg(picId, selected) { if (!picId) return; if (!!selected) { $("#RoomInfo1_RoomPictureHidDefault" + picId).val(1); $("#previewBox" + picId).addClass("defaultImg"); } else { $("#RoomInfo1_RoomPictureHidDefault" + picId).val(0); $("#previewBox" + picId).removeClass("defaultImg"); } } }); </script> </body> </html>
示例二实际测试可用。
相关文章推荐
- 简单获取input file 选中的图片,并在一个div的img里面赋值src实现预览图片
- 于鹏:input实现上传图片的预览以及获取图片的真实尺寸
- 一段上传图片预览JS脚本,Input file图片预览的实现
- 上传图片预览JS脚本 Input file图片预览的实现示例
- sql server 关于表中只增标识问题 C# 实现自动化打开和关闭可执行文件(或 关闭停止与系统交互的可执行文件) ajaxfileupload插件上传图片功能,用MVC和aspx做后台各写了一个案例 将小写阿拉伯数字转换成大写的汉字, C# WinForm 中英文实现, 国际化实现的简单方法 ASP.NET Core 2 学习笔记(六)ASP.NET Core 2 学习笔记(三)
- 上传图片时,Input file图片预览的实现
- 上传图片预览JS脚本 Input file图片预览的实现示例
- input file 实现上传预览图片,以base64上传,兼容IE8+,firefox,chrome
- html,图片上传预览,input file获取文件等相关操作
- javascript实现input file上传图片预览效果
- input type=file实现图片上传,预览以及图片删除
- 上传图片预览JS脚本 Input file图片预览的实现示例
- 上传图片预览JS脚本 Input file图片预览的实现示例
- 上传图片预览JS脚本 Input file图片预览的实现示例
- javascript实现input file上传图片预览效果
- ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
- 上传图片预览JS脚本 Input file图片预览的实现示例
- input file实现多张图片上传
- 上传图片预览JS脚本 Input file图片预览的实现示例
- css3实现一个div设置多张背景图片及background-image属性