javascript - نصاب - تحميل برنامج file upload




معاينة صورة قبل تحميلها (14)

أريد أن أتمكن من معاينة ملف (صورة) قبل تحميله. يجب تنفيذ إجراء المعاينة في المتصفح دون استخدام Ajax لتحميل الصورة.

كيف يمكنني أن أفعل هذا؟


إذا كنت تستخدم الزاوي ، فقم بإلقاء نظرة على توجيه ng-file-upload هذا

انها جميلة جدا.


إنه الكود الخاص بي. دعم IE [6-9] 、 chrome 17 + 、 firefox 、 Opera 11 + 、 Maxthon3

HTML

<input type="file"  id="netBarBig"  onchange="changeFile(this)"  />
<img  src="" id="imagePreview" style="width:120px;height:80px;" alt=""/>

جافا سكريبت:

<script>
   
function previewImage(fileObj, imgPreviewId) {
    var allowExtention = ".jpg,.bmp,.gif,.png";  //allowed to upload file type
    document.getElementById("hfAllowPicSuffix").value;
    var extention = fileObj.value.substring(fileObj.value.lastIndexOf(".") + 1).toLowerCase();
    var browserVersion = window.navigator.userAgent.toUpperCase();
    if (allowExtention.indexOf(extention) > -1) {
        if (fileObj.files) {
            if (window.FileReader) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    document.getElementById(imgPreviewId).setAttribute("src", e.target.result);
                };
                reader.readAsDataURL(fileObj.files[0]);
            } else if (browserVersion.indexOf("SAFARI") > -1) {
                alert("don't support  Safari6.0 below broswer");
            }
        } else if (browserVersion.indexOf("MSIE") > -1) {
            if (browserVersion.indexOf("MSIE 6") > -1) {//ie6
                document.getElementById(imgPreviewId).setAttribute("src", fileObj.value);
            } else {//ie[7-9]
                fileObj.select();
                fileObj.blur(); 
                var newPreview = document.getElementById(imgPreviewId);

                newPreview.style.border = "solid 1px #eeeeee";
                newPreview.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + document.selection.createRange().text + "')";
                newPreview.style.display = "block";

            }
        } else if (browserVersion.indexOf("FIREFOX") > -1) {//firefox
            var firefoxVersion = parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[1]);
            if (firefoxVersion < 7) {//firefox7 below
                document.getElementById(imgPreviewId).setAttribute("src", fileObj.files[0].getAsDataURL());
            } else {//firefox7.0+ 
                document.getElementById(imgPreviewId).setAttribute("src", window.URL.createObjectURL(fileObj.files[0]));
            }
        } else {
            document.getElementById(imgPreviewId).setAttribute("src", fileObj.value);
        }
    } else {
        alert("only support" + allowExtention + "suffix");
        fileObj.value = ""; //clear Selected file
        if (browserVersion.indexOf("MSIE") > -1) {
            fileObj.select();
            document.selection.clear();
        }

    }
}
function changeFile(elem) {
    //file object , preview img tag id
    previewImage(elem,'imagePreview')
}

</script>


تعمل إجابة LeassTaTT بشكل جيد في المتصفحات "القياسية" مثل FF و Chrome. يوجد الحل لـ IE ، ولكنه يبدو مختلفًا. هنا وصف الحل عبر متصفح:

في HTML ، نحتاج إلى عنصرين معاينة ، img للمتصفحات القياسية والقسم لـ IE

HTML:

<img id="preview" 
     src="" 
     alt="" 
     style="display:none; max-width: 160px; max-height: 120px; border: none;"/>

<div id="preview_ie"></div>

في CSS ، نحدد الشيء المحدد التالي لـ IE:

CSS:

#preview_ie {
  FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)
}  

في HTML ، نضمن المعيار وجافا سكريبت الخاصة بـ IE:

<script type="text/javascript">
  {% include "pic_preview.js" %}
</script>  
<!--[if gte IE 7]> 
<script type="text/javascript">
  {% include "pic_preview_ie.js" %}
</script>

إن pic_preview.js هي Javascript من إجابة LeassTaTT. استبدال $('#blah') مثال $('#preview') وإضافة $('#preview').show()

الآن جاسكريبت آي محددة (pic_preview_ie.js):

function readURL (imgFile) {    
  var newPreview = document.getElementById('preview_ie');
  newPreview.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgFile.value;
  newPreview.style.width = '160px';
  newPreview.style.height = '120px';
}    

هذا هو. يعمل في IE7 و IE8 و FF و Chrome. يرجى اختبار في IE9 والتقرير. تم العثور على فكرة معاينة IE هنا: http://forums.asp.net/t/1320559.aspx

http://msdn.microsoft.com/en-us/library/ms532969(v=vs.85).aspx



حل واحد لاينر:

في ما يلي رمز يستخدم عناوين URL لعناصر الكائن ، وهو أكثر فعالية من عنوان URL للبيانات عند تحميل صور كبيرة (تخيل إضافة ترميز 4M إلى صفحة HTML الخاصة بك!):

<img id="blah" alt="your image" width="100" height="100" />

<input type="file" 
    onchange="document.getElementById('blah').src = window.URL.createObjectURL(this.files[0])">

سيكون عنوان URL الذي تم إنشاؤه مثل:

blob:http%3A//localhost/7514bc74-65d4-4cf0-a0df-3de016824345

فيما يلي هو رمز العمل.

<input type='file' onchange="readURL(this);" /> 
<img id="ShowImage" src="#" />

Javascript:

 function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#ShowImage')
                    .attr('src', e.target.result)
                    .width(150)
                    .height(200);
            };

            reader.readAsDataURL(input.files[0]);
        }
    }

لقد قمت بتحرير إجابة إيفان لعرض صورة "بدون معاينة متوفرة" ، إذا لم تكن صورة:

function readURL(input) {
    var url = input.value;
    var ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase();
    if (input.files && input.files[0]&& (ext == "gif" || ext == "png" || ext == "jpeg" || ext == "jpg")) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('.imagepreview').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }else{
         $('.imagepreview').attr('src', '/assets/no_preview.png');
    }
}

لقد قمت بعمل ملحق يمكن أن يولد تأثير المعاينة في IE 7+ بفضل الإنترنت ، لكن لديه قيود قليلة. أنا وضعت في صفحة جيثب بحيث يسهل الحصول عليه

$(function () {
		$("input[name=file1]").previewimage({
			div: ".preview",
			imgwidth: 180,
			imgheight: 120
		});
		$("input[name=file2]").previewimage({
			div: ".preview2",
			imgwidth: 90,
			imgheight: 90
		});
	});
.preview > div {
  display: inline-block;
  text-align:center;
}

.preview2 > div {
  display: inline-block; 
  text-align:center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://rawgit.com/andrewng330/PreviewImage/master/preview.image.min.js"></script>
	Preview
	<div class="preview"></div>
	Preview2
	<div class="preview2"></div>

	<form action="#" method="POST" enctype="multipart/form-data">
		<input type="file" name="file1">
		<input type="file" name="file2">
		<input type="submit">
	</form>


ماذا عن هذا الحل؟

ما عليك سوى إضافة سمة البيانات "data-type = editable" إلى علامة صورة مثل هذا:

<img data-type="editable" id="companyLogo" src="http://www.coventrywebgraphicdesign.co.uk/wp-content/uploads/logo-here.jpg" height="300px" width="300px" />

والبرنامج النصي لمشروعك بالطبع ...

function init() {
    $("img[data-type=editable]").each(function (i, e) {
        var _inputFile = $('<input/>')
            .attr('type', 'file')
            .attr('hidden', 'hidden')
            .attr('onchange', 'readImage()')
            .attr('data-image-placeholder', e.id);

        $(e.parentElement).append(_inputFile);

        $(e).on("click", _inputFile, triggerClick);
    });
}

function triggerClick(e) {
    e.data.click();
}

Element.prototype.readImage = function () {
    var _inputFile = this;
    if (_inputFile && _inputFile.files && _inputFile.files[0]) {
        var _fileReader = new FileReader();
        _fileReader.onload = function (e) {
            var _imagePlaceholder = _inputFile.attributes.getNamedItem("data-image-placeholder").value;
            var _img = $("#" + _imagePlaceholder);
            _img.attr("src", e.target.result);
        };
        _fileReader.readAsDataURL(_inputFile.files[0]);
    }
};

// 
// IIFE - Immediately Invoked Function Expression
// https://.com/questions/18307078/jquery-best-practises-in-case-of-document-ready
(

function (yourcode) {
    "use strict";
    // The global jQuery object is passed as a parameter
    yourcode(window.jQuery, window, document);
}(

function ($, window, document) {
    "use strict";
    // The $ is now locally scoped 
    $(function () {
        // The DOM is ready!
        init();
    });

    // The rest of your code goes here!
}));

شاهد عرضًا على JSFiddle


مثال مع صور متعددة باستخدام JavaScript (jQuery) و HTML5

جافا سكريبت (jQuery)

function readURL(input) {
     for(var i =0; i< input.files.length; i++){
         if (input.files[i]) {
            var reader = new FileReader();

            reader.onload = function (e) {
               var img = $('<img id="dynamic">');
               img.attr('src', e.target.result);
               img.appendTo('#form1');  
            }
            reader.readAsDataURL(input.files[i]);
           }
        }
    }

    $("#imgUpload").change(function(){
        readURL(this);
    });
}

الترميز (HTML)

<form id="form1" runat="server">
    <input type="file" id="imgUpload" multiple/>
</form>

نعم فعلا. إنه ممكن.

أتش تي أم أل

<input type="file" accept="image/*"  onchange="showMyImage(this)" />
 <br/>
<img id="thumbnil" style="width:20%; margin-top:10px;"  src="" alt="image"/>

JS

 function showMyImage(fileInput) {
        var files = fileInput.files;
        for (var i = 0; i < files.length; i++) {           
            var file = files[i];
            var imageType = /image.*/;     
            if (!file.type.match(imageType)) {
                continue;
            }           
            var img=document.getElementById("thumbnil");            
            img.file = file;    
            var reader = new FileReader();
            reader.onload = (function(aImg) { 
                return function(e) { 
                    aImg.src = e.target.result; 
                }; 
            })(img);
            reader.readAsDataURL(file);
        }    
    }

يمكنك الحصول على Live Demo من هنا.


هناك عدة طرق يمكنك القيام بذلك. الطريقة الأكثر فعالية هي استخدام URL.createObjectURL() على File من <input> الخاص بك. مرر هذا الرابط إلى img.src لإخبار المتصفح بتحميل الصورة المقدمة.

إليك مثال على ذلك:

<input type="file" accept="image/*" onchange="loadFile(event)">
<img id="output"/>
<script>
  var loadFile = function(event) {
    var output = document.getElementById('output');
    output.src = URL.createObjectURL(event.target.files[0]);
  };
</script>

يمكنك أيضًا استخدام FileReader.readAsDataURL() لتحليل الملف من <input>. سيؤدي ذلك إلى إنشاء سلسلة في الذاكرة تحتوي على تمثيل base64 للصورة.

<input type="file" accept="image/*" onchange="loadFile(event)">
<img id="output"/>
<script>
  var loadFile = function(event) {
    var reader = new FileReader();
    reader.onload = function(){
      var output = document.getElementById('output');
      output.src = reader.result;
    };
    reader.readAsDataURL(event.target.files[0]);
  };
</script>


يرجى إلقاء نظرة على نموذج التعليمة البرمجية أدناه:

function readURL(input) {

  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      $('#blah').attr('src', e.target.result);
    }

    reader.readAsDataURL(input.files[0]);
  }
}

$("#imgInp").change(function() {
  readURL(this);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" runat="server">
  <input type='file' id="imgInp" />
  <img id="blah" src="#" alt="your image" />
</form>

أيضا ، يمكنك أن تجرب هذه العينة هنا .


function assignFilePreviews() {
      $( 'input[data-previewable=\"true\"]' ).change(function() {
          var prvCnt = $(this).attr('data-preview-container');
          if(prvCnt) {
            if (this.files && this.files[0]) {
              var reader = new FileReader();
              reader.onload = function (e) {
                var img = $('<img>');
                img.attr('src', e.target.result);
                img.error(function() {
                  $(prvCnt).html('');
                });
                $(prvCnt).html('');
                img.appendTo(prvCnt);
              }
              reader.readAsDataURL(this.files[0]);
          }
        }
      });
    }
$(document).ready(function() {
     assignFilePreviews(); 
});

HTML

<input type="file" data-previewable="true" data-preview-container=".prd-img-prv" /> <div class = "prd-img-prv"></div>

يعالج هذا أيضًا الحالة عند اختيار ملف بنوع غير صالح (على سبيل المثال ، pdf)





file-upload