asp.net 关于file上传图片预览的问题

Question

 <input name="Input322" type="file" style="width: 228px; line-height: 20px; height: 20px; onchange="PreviewImg(this,'img_div','ImageInfo','180px','180px')"      border: 1px solid #DBDBDB;" runat="server" id="txtImage" />下面是js
//图片预览
function PreviewImg(imgFile, div_id, img_id, w, h) {
    var imgDiv = document.getElementById(div_id);
    var Browser_Agent=navigator.userAgent;
//判断浏览器的类型
    if (Browser_Agent.indexOf("Firefox") != -1) {
        //火狐浏览器
        var imgPath = imgFile.files[0].getAsDataURL();
        imgDiv.innerHTML = "<img id='imgPreview' src='" + imgPath + "' width='" + width + "' height='" + height + "'/>";
    } 
    else 
    {
          alert(imgFile.value);
          imgDiv.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value;
    }
}
当file改变之后没有任何的反应，   我调试了下运行到imgDiv.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value;这一句的时候报了一个“未知的错误”
请大侠们帮忙看看这是什么问题

Answer 1

浏览器安全限制 想做到预览还是有些困难的 建议试试flash插件。

Answer 2

只用本地路径是不可以，，处于安全，，很多浏览器都是限制的，，可以通过ajax先上传到临时文件夹，，然后预览，，，

Answer 3

function upload() {
    var element = document.getElementById("file_img1");
    if ("\v" == "v") {
        element.onpropertychange = uploadHandle;
    }
    else {
        element.addEventListener("change", uploadHandle, false);
    }
    //上传头像
    function uploadHandle() {
        if (element.value) {
            //上传
            var options = {
                url: '../ashx/ashx_uploadimg.ashx?value=1',
                type: "post", /*设置表单以post方法提交*/
                dataType: "text", /*设置返回值类型为文本*/
                success: function (str) {    //提交成功
                    if (null != str) {
                        $("#up_jpg1").attr("src", "../UploadFile/CreateGif/JPG/" + str + "");
                        $("#jpg_name1").val(str);
                        cleanFile("file_img1");
                    }
                }
            };
            $("[name='up_img_form']").ajaxSubmit(options);
            return false;
        }
    }
}
<input id="file_img1" class="file_img" name="file_img1"  type="file" />
<script type="text/javascript">upload1();</script>
上传操作自己去写

Answer 4

能不能做一个详细点的Demo，  我把你的代码复制了， 运行不了！    js中报一个缺少对象的错误    还有input file  是不是还要加一个onchange=“upload（）”的事件？？？   要不然如何去触发upload（）事件？？    希望您做一个详细的讲解

Answer 5

- - 如果你是要做图片即时预览的话。。  我的建议是  在用户上传之前完全可以获取用户本地的图片显示。
如果是上传了的 就用服务器的url地址进行显示。 饿   反正我是做出来了的。     

Answer 6

可以发Dmeo参考下吗？？    我比较急    

Answer 7

你能用chorme,firefox查看本地图片？

Answer 8

AJAX导步操作。浏览兼容不是很好。

Answer 9

通过AJAX POST FILE到自定义文件夹中 
然后反回到本地文件夹路径给前台的SRC

Answer 10

google浏览器跟firefox无法看到。  但是TT  几个可以显示出来。  当然  如果是后台自己人用 那么可以用我的方法。  如果不是的话那最好还是先上传然后再显示DOME发你。  function display(value) {
            document.getElementById("msgIcon").src = value;
            var type = document.getElementById("msgIcon").src.substr(document.getElementById("msgIcon").src.lastIndexOf("."));
            document.getElementById("hiddenMsgIcon").value = type;
        }<input type="hidden"  id="hiddenMsgIcon" name="hiddenMsgIcon" />
                <input id="fileMsgIcon" name="fileMsgIcon" type="file"  onchange="display(this.value)" />
                
                <img id="msgIcon" alt="" src="" />
            </td>
html代码  图片格式通过hidden一起提交过去 然后保存在服务器。 

Answer 11

http://www.cnblogs.com/cloudgamer/archive/2009/12/22/ImagePreview.html上面可以达到你要的效果，  这个我已经做好了