javascript - input type=file上传的图片怎样获取图片路径给img的src属性

Question

部分html代码

<p id="upload">
    <form action="{:U('Index/uploadhandler')}" enctype="multipart/form-data" method="post" id="imgform">    
            <p id="imglist">

            </p>
            <p id="upp">
            <input type='file'  name='photos' class="upfile">
            </p>              
            <input type="submit" value="提交">
    </form>
</p>

jq代码

$(function(){
        var imgurl=[];
        function createfile(){
        $('#upp').append("<input type='file'  name='photos' class='upfile'>");
        }
        function showimg(url){
            var img='<img src="'+url+'"/>';
            $('#imglist').append(img);
        }
        function addfile(){
            showimg($(this).val());
            $(this).hide();
            createfile();
            $('.upfile').bind('change',addfile);
        }
        $('.upfile').bind('change',addfile);
    })

Answer 1

目前我在内部项目中是这样使用的

var objUrl = getObjectURL(this.files[0]) ;
  if (objUrl) {
            imgShow.attr("src", objUrl);
        }

  function getObjectURL(file) {
    var url = null;
    if (window.createObjectURL != undefined) { // basic
        url = window.createObjectURL(file);
    } else if (window.URL != undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file);
    } else if (window.webkitURL != undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file);
    }
    return url;
}

Answer 2

这个问题是否是对等于：

建议题主阅读下面的文章来获取解决方案；

• jquery实现上传图片本地预览效果

• 用JQuery获取File input里面的数据

应该有相关的jquey插件

这个插件我没有找到，但是当我看到ace的处理方案时候，看到了很大一坨，找到后会补充。

Answer 3

FileReader API

http://jsfiddle.net/tjqsL5oL/

Answer 4

如果你要考虑兼容的话，可以考虑下百度的 http://fex.baidu.com/webuploader/ 已经做了封装了，对于不支持的则用了flash 但是接口保持一致