Peržiūrėti vaizdą prieš įkeldami

Noriu peržiūrėti failą (vaizdą) prieš jį atsisiųsdamas. Peržiūros veiksmas turi būti atliktas naršyklėje nenaudojant „Ajax“, kad įkeltumėte vaizdą.

Kaip tai padaryti?

1003
16 дек. nustatė Simbian 16 dec. 2010-12-16 12:51 '10, 12:51, 2010-12-16 12:51
@ 19 atsakymų

Žiūrėkite žemiau pateiktą pavyzdinio kodą:

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

Arba galite išbandyti šį pavyzdį čia .

1714
16 дек. Ivano Baevo atsakymas gruodžio 16 d. 2010-12-16 12:55 '10, 12:55, 2010-12-16 12:55

Yra keletas būdų tai padaryti. Veiksmingiausias būdas būtų naudoti failą URL.createObjectURL ()<input> . Siųsti šį URL img.src , kad naršyklė galėtų atsisiųsti pateiktą vaizdą.

Štai pavyzdys:

tiesioginę demonstraciją . 

11
Atsakymas pateikiamas Md. 25 июля '14 в 14:20 2014-07-25 14:20 Rahmanas liepos 25 d., 14 val. 14.20 val. 2014-07-25 14:20

Pavyzdys su keliais vaizdais, naudojant „JavaScript“ (jQuery) ir HTML5

„JavaScript“ (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); }); } 

Žymėjimas (HTML)

 <form id="form1" runat="server"> <input type="file" id="imgUpload" multiple/> </form> 
5
26 нояб. lapkričio 26 d. atsakymą pateikė Ratanas Paulius 2015-11-26 09:33 '15 at 9:33 2015-11-26 09:33

Kaip sukurti funkciją, įkeliančią failą ir suaktyvinantį individualų įvykį. Tada prijunkite klausytoją prie įvesties. Taigi, mes turime daugiau lankstumo naudojant failą, o ne tik vaizdų peržiūrai.

  function loadFileFromInput(input,typeData) { var reader, fileLoadedEvent, files = input.files; if (files  files[0]) { reader = new FileReader(); reader.onload = function (e) { fileLoadedEvent = new CustomEvent('fileLoaded',{ detail:{ data:reader.result, file:files[0] }, bubbles:true, cancelable:true }); input.dispatchEvent(fileLoadedEvent); } switch(typeData) { case 'arraybuffer': reader.readAsArrayBuffer(files[0]); break; case 'dataurl': reader.readAsDataURL(files[0]); break; case 'binarystring': reader.readAsBinaryString(files[0]); break; case 'text': reader.readAsText(files[0]); break; } } } function fileHandler (e) { var data = e.detail.data, fileInfo = e.detail.file; img.src = data; } var input = document.getElementById('inputId'), img = document.getElementById('imgId'); input.onchange = function (e) { loadFileFromInput(e.target,'dataurl'); }; input.addEventListener('fileLoaded',fileHandler) 

Tikriausiai mano kodas nėra toks geras, kaip ir kai kurie vartotojai, bet manau, kad suprasite. Čia galite pamatyti pavyzdį.

4
21 марта '14 в 16:16 2014-03-21 16:16 atsakymą pateikė „ ajorquera“ kovo 21 d. 14, 16:16 2014-03-21 16:16

Švarus ir paprastas jsfiddle

 <img id="image-preview" style="height:100px; width:100px;" src="" > <input style="display:none" id="input-image-hidden" onchange="document.getElementById('image-preview').src = window.URL.createObjectURL(this.files[0])" type="file" accept="image/jpeg, image/png"> <button onclick="HandleBrowseClick('input-image-hidden');" >UPLOAD IMAGE</button> <script type="text/javascript"> function HandleBrowseClick(hidden_input_image) { var fileinputElement = document.getElementById(hidden_input_image); fileinputElement.click(); } </script> 

Tai bus naudinga, jei norite sukurti pasirinktinio vaizdo įkėlimo mygtuką.

4
30 нояб. atsakymą pateikė sivashanmugam kannan lapkričio 30 d 2016-11-30 08:57 '16 at 8:57 2016-11-30 08:57

Kaip apie šį sprendimą?

Tiesiog pridėkite vaizdo tipo = redaguojamo duomenų atributą į vaizdo žymę, pavyzdžiui:

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

Ir scenarijus jūsų projektui su kursu ...

 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://stackoverflow.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! })); 

Žr. Demonstraciją „JSFiddle“

2
06 янв. Rodolpho Brock atsakymas, pateiktas sausio 06 d 2015-01-06 19:19 '15, 19:19, 2015-01-06 19:19

Aš sukūriau įskiepį, kuris gali generuoti IE 7+ peržiūros efektą dėl interneto, tačiau turi keletą apribojimų. Įdėjau jį į „github“ puslapį , kad būtų lengviau gauti.

 .preview > div { display: inline-block; text-align:center; } .preview2 > div { display: inline-block; text-align:center; } 
1
27 июля '15 в 9:01 2015-07-27 09:01 atsakymą Andriejus pateikė liepos 27 d. 15 val. 9:01 2015-07-27 09:01

išbandykite šį kodą (dėka: http://opoloo.github.io/jquery_upload_preview/ )

1
05 дек. atsakymas pateikiamas sms247 05 dec. 2017-12-05 00:31 '17 0:31 2017-12-05 00:31

Žemiau yra darbo kodas.

 <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]); } } 
1
29 июля '16 в 21:41 2016-07-29 21:41 Atsakymą pateikė Muhammad Awais liepos 16 d. 16:41 2016-07-29 21:41

išbandykite šį paprastą kodą, jis bus naudingas jums (žr. ir ačiū: http://opoloo.github.io/jquery_upload_preview/ )

0
30 окт. Hassan Saeed spalio 30 d. Atsakymas 2017-10-30 21:32 '17 21:32 2017-10-30 21:32
 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>

Ji taip pat tvarko atvejį, kai pasirinktas netinkamo tipo failas (pvz., Pdf)

0
10 апр. Atsakymą pateikė Jinu Joseph Daniel balandžio 10 d 2017-04-10 22:25 '17, 10:25 pm 2017-04-10 22:25

Tai mano kodas. IE palaikymas [6-9], chromo 17+, firefox, Opera 11+, Maxthon3

HTML

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

„Javascript“:

šią „ng-file-upload“ direktyvą. 

Tai gana kietas.

0
20 янв. atsakymas pateikiamas VivekDev 20 sausis 2017-01-20 14:52 '17, 14:52 pm 2017-01-20 14:52

mano paraiškoje, naudojant šifruotus GET URL parametrus, jis veikė tik. Aš visada turiu TypeError: $(...) is null . Paimta iš https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL

 <input type="file" onchange="previewFile()"><br> <img src="" height="200" alt="Image preview..."> 
-1
01 авг. Robert TheSim atsakymas rugpjūčio 01 d 2017-08-01 09:07 '17 at 9:07 2017-08-01 09:07

Kiti klausimai apie „ žymes iškelia arba Užduoti klausimą