如何在上傳之前在各種瀏覽器中預覽圖像

Question

我想在圖像上傳之前顯示圖像預覽。我發現了一個適用於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個瀏覽器中進行圖像預覽，我會很高興。如果它不是，那麼是唯一的選擇有兩種形式與另一種形式的圖像上傳部分？

Answer 1

這將是一個嚴重的安全問題，如果完成。您無法在用戶計算機中預覽文件。您必須將文件上傳到服務器，並可以在文件成功上傳後顯示該文件的預覽。

Answer 2

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

Answer 3

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

Answer 4

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); 
     } 
    }); 


}); 

Answer 5

鏈接到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>