1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title></title>
  5. <script type="text/javascript">
  6. //下面用于多图片上传预览功能
  7. function setImagePreviews(avalue) {
  8. var docObj = document.getElementById("doc");
  9. var dd = document.getElementById("dd");
  10. dd.innerHTML = "";
  11. var fileList = docObj.files;
  12. for (var i = 0; i < fileList.length; i++) {
  13. dd.innerHTML += "<img id='img" + i + "' />";
  14. var imgObjPreview = document.getElementById("img" + i);
  15. if (docObj.files && docObj.files[i]) {
  16. //火狐下，直接设img属性
  17. imgObjPreview.style.display = 'block';
  18. imgObjPreview.style.width = '100px';
  19. imgObjPreview.style.height = '100px';
  20. //imgObjPreview.src = docObj.files[0].getAsDataURL();
  21. //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
  22. imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]);
  23. }
  24. else {
  25. //IE下，使用滤镜
  26. docObj.select();
  27. var imgSrc = document.selection.createRange().text;
  28. alert(imgSrc)
  29. var localImagId = document.getElementById("img" + i);
  30. //必须设置初始大小
  31. localImagId.style.width = "80px";
  32. localImagId.style.height = "90px";
  33. //图片异常的捕捉，防止用户修改后缀来伪造图片
  34. try {
  35. localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
  36. localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
  37. }
  38. catch (e) {
  39. alert("您上传的图片格式不正确，请重新选择!");
  40. return false;
  41. }
  42. imgObjPreview.style.display = 'none';
  43. document.selection.empty();
  44. }
  45. }
  46. return true;
  47. }
  48. </script>
  49. </head>
  50. <body>
  51. <div id="deliveryNote">
  52. <div class="row ">
  53. <ul id="noteDetail" class="list-group">
  54. <li class="list-group-item">
  55. <div>
  56. <span>批量上传图片</span>
  57. <input type="file" name="file" id="doc" multiple="multiple" style="width:150px;" onchange="javascript:setImagePreviews();" accept="image/*" />
  58. </div>
  59. <div id="dd" ></div>
  60. </li>
  61. </ul>
  62. </div>
  63. </div>
  64. </body>
  65. </html>