2009-12-11 71 views
6

我想在图像上传之前显示图像预览。我发现了一个适用于ie6和firefox的部分解决方案,并且尚未在ie7或ie8中对其进行测试。但我想要一个在safari中工作的解决方案,即ie7和ie8。这是通过将IE6和火狐的解决方案所获得的解决方案:如何在上传之前在各种浏览器中预览图像

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工作,并且“src = what.value”在ie7和ie8中也有效?如果没有,是否有一些解决方案也可以在那里工作?如果我可以在5个或6个浏览器中进行图像预览,我会很高兴。如果它不是,那么是唯一的选择有两种形式与另一种形式的图像上传部分?

回答

1

这将是一个严重的安全问题,如果完成。您无法在用户计算机中预览文件。您必须将文件上传到服务器,并可以在文件成功上传后显示该文件的预览。

+3

事实并非如此。新的HTML5 File API完全适用于此目的。它完全保护文件路径,你必须通过FileReader读取所有数据。 – 2011-04-12 18:33:57

+1

注意这个答案是3岁。 – Ash 2012-12-14 18:57:21

5

你可以使用吹气功能。在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=""> 
+0

这很好。应该被标记为答案。 – JT703 2013-09-05 14:37:10

+0

不能正常工作......你能添加小提琴吗? – 2014-01-12 18:48:40

+0

它不适用于IE7 – 2017-03-28 09:11:31

2

在Firefox和工作铬

<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> 
0

jQuery的AJAX文件上传

$('[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); 
     } 
    }); 


}); 
0

链接到blob,你会链接到任何形象,当然,只要给出或更改即将上传的图像,就必须立即更新src,以下是我如何操作,我没有时间在Windows浏览器(即IE)中测试它。

例如还实现基本验证: http://jsfiddle.net/J3GP7/

<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> 
相关问题