怎么简单获取input file 选中的图片,并在一个div的img里面赋值src实现预览?

原创
2016/03/09 17:20
阅读数 732
<div id="uploader-demo"  style="margin-top:3px;margin-bottom:3px;">
                    <!--用来存放item-->
                    <!-- <div id="fileList" class="uploader-list"></div> -->
                    <div  style="width:50px;float:left;margin-right:5px;">
                    <input id="filePicker" capture="camera" type="file" class="filePicker" style="display:none;" / >
                    <img id="filePicker_img" src="/static/Mui/sc/pickimg.png" style="width:50px;height:50px;"/>
                    </div>
                     <div  style="width:50px;float:left;margin-right:5px;">
                     <input id="filePicker1" capture="camera" type="file" class="filePicker1" style="display:none;" />
                     <img id="filePicker1_img" src="/static/Mui/sc/pickimg.png" style="width:50px;height:50px;"/>
                     </div>
                      <div style="width:50px;float:left;margin-right:5px;">
                      <input id="filePicker2"  capture="camera" type="file" class="filePicker2" style="display:none;" />
                      <img id="filePicker2_img" src="/static/Mui/sc/pickimg.png" style="width:50px;height:50px;"/>
                      </div>
                </div>

<script type="text/javascript">
    crom('filePicker','filePicker_img')
    crom('filePicker1','filePicker1_img')
    crom('filePicker2','filePicker2_img')
    // 代码如下利用html5实现:几乎兼容所有主流浏览器,当然IE必须是IE 6以上
    // 【jquery代码】
    function crom(inputId,imgId){
        $("#"+inputId).change(function() {
        var $file = $(this);
        var fileObj = $file[0];
        var windowURL = window.URL || window.webkitURL;
        var dataURL;
        var $img = $("#"+imgId);
         
        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(imgId);
        // 两个坑:
        // 1、在设置filter属性时,元素必须已经存在在DOM树中,动态创建的Node,也需要在设置属性前加入到DOM中,先设置属性在加入,无效;
        // 2、src属性需要像下面的方式添加,上面的两种方式添加,无效;
        imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
        imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
         
        }
        });
        $('#'+imgId).click(function(event) {
            $('#'+inputId).click();
        });
    }


展开阅读全文
打赏
1
7 收藏
分享
加载中
更多评论
打赏
0 评论
7 收藏
1
分享
在线直播报名
返回顶部
顶部