一，基本原理：
通过表单的input type="file"控件可以实现本地文件的选择，然后通过form表单提交到服务器端实现上传。注意此时表单需要添加内容属性： enctype="multipart/form-data"，并且该form表单是post方式提交。
示例一：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"> 6 <title>上传图片预览示例一</title> 7 <meta name="author" content="熊仔其人-2017年3月3日" /> 8 <meta name="keywords" content="" /> 9 <meta name="description" content="示例一展示了前端图片上传预览基本功能的实现" /> 10 <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 11 </head> 12 <body> 13 <form id="Form1" method="post" enctype="multipart/form-data"> 14 <input id="file_upload" type="file" accept="image/jpeg,image/png,image/gif" /> 15 <div class="image_container"> 16 <img id="preview" style="height:130px;117px;border-0px;" /> 17 </div> 18 </form> 19 20 <script type="text/javascript"> 21 $(function () { 22 $("#file_upload").change(function () { 23 var $file = $(this); 24 var fileObj = $file[0]; 25 var windowURL = window.URL || window.webkitURL; 26 var dataURL; 27 var $img = $("#preview"); 28 29 if (fileObj && fileObj.files && fileObj.files[0]) { 30 dataURL = windowURL.createObjectURL(fileObj.files[0]); 31 $img.attr('src', dataURL); 32 } else { 33 dataURL = $file.val(); 34 var imgObj = document.getElementById("preview"); 35 // 两个坑: 36 // 1、在设置filter属性时，元素必须已经存在在DOM树中，动态创建的Node，也需要在设置属性前加入到DOM中，先设置属性在加入，无效； 37 // 2、src属性需要像下面的方式添加，上面的两种方式添加，无效； 38 imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)"; 39 imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL; 40 41 } 42 }); 43 }); 44 </script> 45 </body> 46 </html>
示例一展示了前端图片上传预览基本功能的实现。其好处主要是选择本地图片在前端直接预览，而不需要先上传到服务器。缺点是该预览方式需要依赖浏览器兼容支持（目前实际测试IE7以上，Chrome 52以上，及Firefox 大多数浏览器都支持）。
二，实际运用多张图片上传和预览，可设置默认图片，且可移除选择
在实际运用中可能需要多张图片上传和预览，并且实现可移除选择，可以点击设置默认图片等功能。
示例二：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"> 6 <title>上传图片预览示例二</title> 7 <meta name="author" content="熊仔其人-2017年3月3日" /> 8 <meta name="keywords" content="" /> 9 <meta name="description" content="实际运用多张图片上传和预览，可设置默认图片，且可移除选择" /> 10 11 <style type="text/css"> 12 .image_container { 13 display: inline-block; 14 float: left; 15 } 16 17 #tdRoomPicture a, .image_container a { 18 text-align: center; 19 vertical-align: middle; 20 text-decoration: none; 21 } 22 23 a.addImg { 24 width: 100px; 25 height: 100px; 26 line-height: 100px; 27 display: inline-block; 28 font-size: 50px; 29 background-color: #dae6f3; 30 } 31 32 .image_container a.previewBox { 33 background-color: #dae6f3; 34 margin: 0 3px 0 0; 35 display: none; 36 /*display: inline-block;*/ 37 } 38 39 .image_container .delImg { 40 position: absolute; 41 color: #f00; 42 margin: 0 0 0 84px; 43 font-size: 16px; 44 width: 16px; 45 height: 16px; 46 line-height: 16px; 47 text-align: center; 48 vertical-align: middle; 49 background-color: #c3c3c3; 50 } 51 52 .defaultImg { 53 border: 1px solid #f90303; 54 } 55 56 .defaultImg:before { 57 content: "默认图片"; 58 float: left; 59 position: absolute; 60 color: #f90303; 61 font-size: 14px; 62 } 63 64 .defaultImg:after { 65 content: ""; 66 } 67 </style> 68 69 <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 70 71 </head> 72 <body> 73 <form id="Form1" method="post" enctype="multipart/form-data"> 74 <div id="tdRoomPicture"> 75 76 <!--<div class="image_container" data-picId="1"> 77 <input id="RoomInfo1_RoomPicture1" name="RoomInfo1_RoomPicture1" type="file" accept="image/jpeg,image/png,image/gif" style="display: none;" /> 78 <input id="RoomInfo1_RoomPictureHidDefault1" name="RoomInfo1_RoomPictureHidDefault1" type="hidden" value="0" /> 79 <a href="javascript:;" id="previewBox1" class="previewBox defaultImg"> 80 <div class="delImg">×</div> 81 <img id="preview1" style="height: 100px; 100px; border- 0px;" /> 82 </a> 83 </div>--> 84 85 <a href="javascript:;" class="addImg" data-picid="0">+</a> 86 </div> 87 </form> 88 89 <script type="text/javascript"> 90 $(function () { 91 var picId = 0; 92 var pictureUploading = false; 93 $("#Form1").delegate(".addImg", "click", function () { 94 if (!!pictureUploading) return; 95 pictureUploading = true; 96 97 picId = parseInt($(this).attr("data-picId")); 98 picId++; 99 $(this).attr("data-picId", picId); 100 101 $(this).before("<div class="image_container" data-picId="" + picId + "">" 102 + "<input id="RoomInfo1_RoomPicture" + picId + "" name="RoomInfo1_RoomPicture" + picId + "" type="file" accept="image/jpeg,image/png,image/gif" style="display: none;" />" 103 + "<input id="RoomInfo1_RoomPictureHidDefault" + picId + "" name="RoomInfo1_RoomPictureHidDefault" + picId + "" type="hidden" value="0" />" 104 + "<a href="javascript:;" id="previewBox" + picId + "" class="previewBox">" 105 + "<div class="delImg">×</div>" 106 + "<img id="preview" + picId + "" style="height:100px;100px;border-0px;" />" 107 + "</a>" 108 + "</div>"); 109 110 $("#RoomInfo1_RoomPicture" + picId).change(function () { 111 var $file = $(this); 112 var fileObj = $file[0]; 113 var windowURL = window.URL || window.webkitURL; 114 var dataURL; 115 116 $("#previewBox" + picId).css("display", "inline-block"); 117 var $img = $("#preview" + picId); 118 //var $img = $("#preview1"); 119 120 if (fileObj && fileObj.files && fileObj.files[0]) { 121 dataURL = windowURL.createObjectURL(fileObj.files[0]); 122 $img.attr('src', dataURL); 123 } else { 124 dataURL = $file.val(); 125 var imgObj = $img; //document.getElementById("preview"); 126 // 两个坑: 127 // 1、在设置filter属性时，元素必须已经存在在DOM树中，动态创建的Node，也需要在设置属性前加入到DOM中，先设置属性在加入，无效； 128 // 2、src属性需要像下面的方式添加，上面的两种方式添加，无效； 129 imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)"; 130 imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL; 131 } 132 133 if (1 === picId) { 134 defaultImg(picId, true); 135 } 136 pictureUploading = false; 137 138 }); 139 $("#RoomInfo1_RoomPicture" + picId).click(); 140 141 //设置默认图片 142 $(".previewBox").click(function () { 143 var _picId = parseInt($(this).parent(".image_container").attr("data-picId")); 144 $(".image_container").each(function () { 145 var i = parseInt($(this).attr("data-picId")); 146 if (i === _picId) 147 defaultImg(i, true); 148 else 149 defaultImg(i, false); 150 }); 151 }); 152 153 //删除上传的图片 154 $(".delImg").click(function () { 155 var _picId = parseInt($(this).parent().parent(".image_container").attr("data-picId")); 156 $(".image_container[data-picid='" + _picId + "']").remove(); 157 if ($(".image_container").length > 0 && $(".defaultImg").length < 1) { 158 $(".image_container").each(function () { 159 var i = parseInt($(this).attr("data-picId")); 160 defaultImg(i, true); 161 return false; 162 }); 163 } 164 165 }); 166 167 }); 168 169 function defaultImg(picId, selected) { 170 if (!picId) return; 171 if (!!selected) { 172 $("#RoomInfo1_RoomPictureHidDefault" + picId).val(1); 173 $("#previewBox" + picId).addClass("defaultImg"); 174 } 175 else { 176 $("#RoomInfo1_RoomPictureHidDefault" + picId).val(0); 177 $("#previewBox" + picId).removeClass("defaultImg"); 178 } 179 } 180 }); 181 </script> 182 </body> 183 </html>
示例二实际测试可用。