zoukankan      html  css  js  c++  java
  • js前端实现多图图片上传预览

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>测试页面</title>

    <script type="text/javascript">

    //下面用于多图片上传预览功能

    function setImagePreviews(avalue) {

    var docObj = document.getElementById("doc");

    var dd = document.getElementById("dd");

    dd.innerHTML = "";

    var fileList = docObj.files;

    for (var i = 0; i < fileList.length; i++) {

    dd.innerHTML += "<div style='float:left' > <img id='img" + i + "' /> </div>";

    var imgObjPreview = document.getElementById("img"+i);

    if (docObj.files && docObj.files[i]) {

    //火狐下,直接设img属性

    imgObjPreview.style.display = 'block';

    imgObjPreview.style.width = '150px';

    imgObjPreview.style.height = '180px';

    //imgObjPreview.src = docObj.files[0].getAsDataURL();

    //火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式

    imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]);

    }

    else {

    //IE下,使用滤镜

    docObj.select();

    var imgSrc = document.selection.createRange().text;

    alert(imgSrc)

    var localImagId = document.getElementById("img" + i);

    //必须设置初始大小

    localImagId.style.width = "150px";

    localImagId.style.height = "180px";

    //图片异常的捕捉,防止用户修改后缀来伪造图片

    try {

    localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";

    localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;

    }

    catch (e) {

    alert("您上传的图片格式不正确,请重新选择!");

    return false;

    }

    imgObjPreview.style.display = 'none';

    document.selection.empty();

    }

    }

    return true;

    }

    </script>

    </head>

    <body>

    <div style="margin :0px auto; 990px;">

    <input type="file" name="file" id="doc" multiple="multiple" style="150px;" onchange="javascript:setImagePreviews();" accept="image/*" />

    <div id="dd" style=" 990px;"></div>

    </div>

    </body>

    </html>

  • 相关阅读:
    leetcode Super Ugly Number
    leetcode Find Median from Data Stream
    leetcode Remove Invalid Parentheses
    leetcode Range Sum Query
    leetcode Range Sum Query
    leetcode Minimum Height Trees
    hdu 3836 Equivalent Sets
    hdu 1269 迷宫城堡
    hud 2586 How far away ?
    poj 1330 Nearest Common Ancestors
  • 原文地址:https://www.cnblogs.com/tyqing/p/6004796.html
Copyright © 2011-2022 走看看