विभिन्न ब्राउज़रों में अपलोड करने से पहले किसी छवि का पूर्वावलोकन कैसे करें

Question

मैं अपलोड होने से पहले किसी छवि का पूर्वावलोकन दिखाना चाहता हूं। मुझे आंशिक समाधान मिला है जो आई 6 और फ़ायरफ़ॉक्स के लिए काम करता है, और अभी तक इसे 7 यानी 8 में परीक्षण किया गया है। लेकिन मुझे एक समाधान चाहिए जो सफारी, यानी 7 और यानी 8 में भी काम करता है। यहाँ समाधान 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() हिस्सा फ़ायरफ़ॉक्स में काम करता है, और "src = what.value" भाग IE6 में काम करता है, लेकिन सफारी में क्या काम करेगा, और क्या "src = what.value" IE7 और ie8 में भी काम करता है? यदि नहीं, तो क्या कोई समाधान है जो वहां भी काम करता है? अगर मैं छवि पूर्वावलोकन 5 या 6 ब्राउज़रों में काम कर सकता हूं तो मैं खुश रहूंगा। यदि ऐसा नहीं है तो छवि के अपलोड के साथ दो रूपों का एकमात्र विकल्प है?

Answer 1

यदि यह किया जाता है तो यह एक गंभीर सुरक्षा समस्या होगी। आपके पास उपयोगकर्ता कंप्यूटर में फ़ाइल का पूर्वावलोकन नहीं हो सकता है। आपको फ़ाइल को सर्वर पर अपलोड करना होगा और सफलतापूर्वक अपलोड होने के बाद फ़ाइल का पूर्वावलोकन दिखा सकता है।

Answer 2

आप उड़ाने का काम कर सकते हैं। पर IE7 + और फ़ायरफ़ॉक्स और क्रोम का परीक्षण किया

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

फ़ायरफ़ॉक्स में काम और क्रोम

<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 के लिए लिंक के रूप में आप किसी भी छवि से लिंक होगा, निश्चित रूप से आपको जल्द ही अपलोड होने वाली छवियों को तुरंत अपडेट करना होगा या नहीं, यहां बताया गया है कि मैं इसे कैसे करता हूं, मेरे पास विंडोज ब्राउज़र (यानी आईई) में इसका परीक्षण करने का समय नहीं था। 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>