Html 如何在各种浏览器中上载前预览图像

我想在上传前显示图像预览。我已经找到了一个适用于ie6和firefox的部分解决方案，但还没有在ie7或ie8中进行测试。但我想要一个在safari、ie7和ie8中也能工作的解决方案。以下是通过结合ie6和firefox解决方案获得的解决方案：

function preview(what) {
if(jQuery.browser.msie) {
document.getElementById("preview-photo").src=what.value;
return;
}
else if(jQuery.browser.safari) {
document.getElementById("preview-photo").src=what.value;
return;
}
document.getElementById("preview-photo").src=what.files[0].getAsDataURL();
//  alert(jQuery("#preview-photo").height());
//  alert(jQuery("#preview-photo").width());
var h = jQuery("#preview-photo").height();  
var w = jQuery("#preview-photo").width();//assuming width is 68, and height is floating
if ((h > 68) || (w > 68)){
if (h > w){
jQuery("#preview-photo").css("height", "68px");
jQuery("#preview-photo").css("width", "auto");
}else {
jQuery("#preview-photo").css("width", "68px");
jQuery("#preview-photo").css("height", "auto");
}
}
}

---

getAsDataURL（）部分在firefox中起作用，“src=what.value”部分在ie6中起作用，但在safari中什么可以起作用，在ie7和ie8中“src=what.value”也起作用吗？如果没有，是否有一些解决方案也适用于此？我会很高兴，如果我可以使图像预览工作在5或6个浏览器。如果没有，那么只有两个表单可以选择将图像上载到另一个表单中？

如果这样做，这将是一个严重的安全问题。您不能在用户计算机中预览文件。您必须将文件上载到服务器，并在成功上载后显示文件预览。

您可以使用blow功能。在IE7+和Firefox以及chrome上测试

function loadname(img, previewName){  

var isIE = (navigator.appName=="Microsoft Internet Explorer");  
var path = img.value;  
var ext = path.substring(path.lastIndexOf('.') + 1).toLowerCase();  

 if(ext == "gif" || ext == "jpeg" || ext == "jpg" ||  ext == "png" )  
 {       
    if(isIE) {  
       $('#'+ previewName).attr('src', path);  
    }else{  
       if (img.files[0]) 
        {  
            var reader = new FileReader();  
            reader.onload = function (e) {  
                $('#'+ previewName).attr('src', e.target.result);  
            }
            reader.readAsDataURL(img.files[0]);  
        }  
    }  

 }else{  
  incorrect file type  
 }   
}  

<input type="file" name="image" onchange("loadname(this,'previewimg')") >
<img src="about:blank" name="previewimg" id="previewimg" alt="">

函数加载名（img，previewName）{
var isIE=（navigator.appName==“Microsoft Internet Explorer”）；
var路径=img.value；
var ext=path.substring（path.lastIndexOf（'.'）+1.toLowerCase（）；
如果（ext==“gif”| | ext==“jpeg”| | ext==“jpg”| | ext==“png”）
{       
如果（isIE）{
$（'#'+previewName）.attr（'src'，path）；
}否则{
if（img.files[0]）
{  
var reader=new FileReader（）；
reader.onload=函数（e）{
$（'#'+previewName）.attr（'src'，e.target.result）；
}
reader.readAsDataURL（img.files[0]）；
}  
}  
}否则{
不正确的文件类型
}   
}  

在firefox和chrome中工作

<input type="file" id="file" />
<div id="div"></div>
<script type="text/javascript">
function view() {
    var f = document.getElementById("file").files[0];
    var reader = new FileReader();
    reader.onload = (function(evt) {  //evt get all value
        document.getElementById('div').innerHTML = 
            "PIC :<img src=" +
            evt.target.result + "/>" ;
    });
    reader.readAsDataURL(f);
}
</script>

函数视图（）{
var f=document.getElementById（“文件”）.files[0]；
var reader=new FileReader（）；
reader.onload=（函数（evt）{//evt获取所有值
document.getElementById（'div'）。innerHTML=
“图：”；
});
reader.readAsDataURL（f）；
}

jquery ajax文件上传 链接到，就像你会链接到任何图像一样，当然，一旦即将上传的图像被给出或更改，你就必须更新src，我就是这样做的，我没有时间在Windows浏览器（即IE）中测试它

此示例还实现了基本验证：

#图像预览{
显示：无；
}

图像：




/** 
文件输入字段的onchange事件处理程序。
*它使用文件扩展名进行非常基本的验证。
*如果文件名通过验证，它将显示图像
使用它的blobURL，将隐藏输入字段并显示delete
按钮，允许用户删除图像
*/
jQuery（'#image'）。on（'change'，function（）{
ext=jQuery（this.val（）.split（'.'）.pop（）.toLowerCase（）；
if（jQuery.inArray（ext，['gif'，'png'，'jpg'，'jpeg']）=-1）{
resetFormElement（jQuery（this））；
window.alert（'不是图像！'）；
}否则{
file=jQuery（'#image'）.prop（“文件”）[0]；
blobURL=window.URL.createObjectURL（文件）；
jQuery（'#image_preview img'）.attr（'src'，blobURL）；
jQuery（“#图像预览”）.slideDown（）；
jQuery（this.slideUp（）；
}
});
/**
删除按钮的onclick事件处理程序。
它删除图像，清除并取消隐藏文件输入字段。
*/
jQuery（“#图像预览a”）.bind（'click'，function（）{
resetFormElement（jQuery（“#image”）；
jQuery（“#image”）.slideDown（）；
jQuery（this.parent（）.slideUp（）；
返回false；
});
/** 
*重置表单元素
* 
*@param e jQuery对象
*/
函数resetFormElement（e）{
e、 换行（“”）.closest（'form'）.get（0.reset（）；
e、 展开（）；
}

不正确。新的HTML5文件API正是为了实现这一目的。它完全保护文件路径，您必须通过文件读取器读取所有数据。注意：此答案已存在3年。

$('[name="send"]').click(function(){

   view();

   v_data = {
                news_header : $('[name="news_header"]').val(),
                news_auth : $('[name="news_auth"]').val(),
                news_image : image, //this var taking for view() function what i use before
                news_news : $('[name="news_news"]').val()    

            };

   $("#show").html(v_data.news_Header + " " + v_data.news_auth + " "+ v_data.news_image + " "+ v_data.news_news );

   $.ajax({
        type    :   "POST",
        url     :   './insert_news_data.php',
        enctype: 'multipart/form-data',        
        data    :   v_data,

        success: function(data) {
            alert(data);
        }
   });


});

    <style>
        #image_preview {
            display:none;
        }
    </style>

    <form>
        <p>
            <label for="image">Image:</label><br />
            <input type="file" name="image" id="image" />
        </p>
    </form>
    <div id="image_preview">
        <img src="#" /><br />
        <a href="#">Remove</a>
    </div>

    <script>
    /** 
    onchange event handler for the file input field.
    * It emplements very basic validation using the file extension.
    * If the filename passes validation it will show the image 
    using it's blob URL and will hide the input field and show a delete
    button to allow the user to remove the image
    */
    jQuery('#image').on('change', function () {
        ext = jQuery(this).val().split('.').pop().toLowerCase();
        if (jQuery.inArray(ext, ['gif', 'png', 'jpg', 'jpeg']) == -1) {
            resetFormElement(jQuery(this));
            window.alert('Not an image!');
        } else {
            file = jQuery('#image').prop("files")[0];
            blobURL = window.URL.createObjectURL(file);
            jQuery('#image_preview img').attr('src', blobURL);
            jQuery('#image_preview').slideDown();
            jQuery(this).slideUp();
        }
    });

    /**
    onclick event handler for the delete button.
    It removes the image, clears and unhides the file input field.
    */
    jQuery('#image_preview a').bind('click', function () {
        resetFormElement(jQuery('#image'));
        jQuery('#image').slideDown();
        jQuery(this).parent().slideUp();
        return false;
    });

    /** 
     * Reset form element
     * 
     * @param e jQuery object
     */
    function resetFormElement(e) {
        e.wrap('<form>').closest('form').get(0).reset();
        e.unwrap();
    }
    </script>