zoukankan      html  css  js  c++  java

  • 批量选择图片

    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="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>
  • 相关阅读:
    ES6 fetch函数与后台交互
    玩转HTML5移动页面(动效篇)
    使用Flexible实现手淘H5页面的终端适配
    简单判断是否是微信打开页面代码
    移动端JS 触摸事件基础
    移动端中如何检测设备方向的变化？
    JS禁止横竖屏切换,强制横竖屏显示
    移动端Web开发如何处理横竖屏
    关于手机端CSS Sprite图标定位的一些领悟
    移动web页面使用微软雅黑字体的问题
  • 原文地址：https://www.cnblogs.com/LinYangSurper/p/9054514.html
Copyright © 2011-2022 走看看