All geek questions in one place

How to place the "embedded image" in the form before uploading?

I want to allow users to write a message and upload images inside it ( like a CMS blog post ).

Writing a script file download is simple. But the resolution of the button / function "place in the line" is difficult.
Is there a tutorial on how to do this?

I use JavaScript to allow this. Also, I'm not sure if I should display the embedded tmp image or upload a file ( with a separate upload button than the full form upload button ) and show the actual image object before submitting the form? I'm here now.

How should I do it?

Thanks.

+4
source share
2 answers

Use this Javascript code:

 <script type="text/javascript"> 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]); } } </script>

Add this HTML:

 <body> <form id="form1" runat="server"> <input type='file' onchange="readURL(this);" /> <img id="blah" src="#" alt="your image" /> </form> </body>

Here is a preview: http://jsbin.com/uboqu3/edit#javascript,html,live

I think this may help you.

+7
source

You would use HTML5 filerader: http://dev.w3.org/2006/webapi/FileAPI/#filereader-interface

Best working example copied from http://www.html5rocks.com/en/tutorials/file/dndfiles/

 <style> .thumb { height: 75px; border: 1px solid #000; margin: 10px 5px 0 0; } </style> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <input type="file" id="files" name="files[]" multiple /> <output id="list"></output> <script> function handleFileSelect(evt) { var files = evt.target.files; // FileList object // Loop through the FileList and render image files as thumbnails. for (var i = 0, f; f = files[i]; i++) { // Only process image files. if (!f.type.match('image.*')) { continue; } var reader = new FileReader(); // Closure to capture the file information. reader.onload = (function(theFile) { return function(e) { // Render thumbnail. var span = document.createElement('span'); span.innerHTML = ['<img class="thumb" src="', e.target.result, '" title="', escape(theFile.name), '"/>'].join(''); document.getElementById('list').insertBefore(span, null); }; })(f); // Read in the image file as a data URL. reader.readAsDataURL(f); } } //trigger dom change after event document.getElementById('files').addEventListener('change', handleFileSelect, false); </script>
+3
source

Source: https://habr.com/ru/post/1397379/

More articles:


All Articles