come visualizzare l'anteprima di un'immagine prima del caricamento in vari browser

Question

Voglio mostrare l'anteprima di un'immagine prima che venga caricata. Ho trovato una soluzione parziale che funziona per ie6 e firefox, e non ha ancora testato in ie7 o ie8. Ma voglio una soluzione che funzioni in safari, ie7 e ie8 pure. Ecco la soluzione ottenuta combinando la soluzione ie6 e 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"); 
} 
} 
} 

La parte getAsDataURL() funziona in Firefox, e il "src = what.value" parte funziona in IE6, ma quello funzionerebbe in safari, e "src = what.value" funziona anche in ie7 e ie8? In caso contrario, c'è qualche soluzione che funziona anche lì? Sarò felice se riesco a far funzionare l'anteprima dell'immagine in 5 o 6 browser. Se non lo è, allora è l'unica opzione per avere due moduli con la parte di caricamento di immagini di un altro modulo?

Answer 1

Questo sarà un grave problema di sicurezza se fatto. Non è possibile avere un'anteprima di un file nel computer degli utenti. Devi caricare il file sul server e mostrare l'anteprima del file dopo che è stato caricato con successo.

Answer 2

è possibile utilizzare la funzione soffio. testato su IE7 + e Firefox e 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

Lavori in Firefox e 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> 

Answer 4

file di ajax jquery caricare

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

Link alla blob come volesse link a qualsiasi immagine, di Ovviamente è necessario aggiornare lo src non appena le immagini che verranno caricate verranno date o modificate, ecco come faccio, non ho avuto il tempo di provarlo in Windows Browsers (ie IE).

Questo esempio implementa anche la convalida di base: 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>