I want to allow users to write a post and upload images inline through out it (like a CMS blog post).
Writing the file upload script is easy. But allowing a "place inline" button / functionality is proving to be tricky.
Is there a tutorial on how to do this?
I'm messing around with some JavaScript to allow it. Also, I'm not sure if I should display the inline tmp image or actually upload the file (with a separate upload button than the full form upload button) and show the actual image loc before the form is submitted? I'm all over the place on this right now.
How should I go about this?
Thank you.
I want to allow users to write a post and upload images inline through out it (like a CMS blog post).
Writing the file upload script is easy. But allowing a "place inline" button / functionality is proving to be tricky.
Is there a tutorial on how to do this?
I'm messing around with some JavaScript to allow it. Also, I'm not sure if I should display the inline tmp image or actually upload the file (with a separate upload button than the full form upload button) and show the actual image loc before the form is submitted? I'm all over the place on this right now.
How should I go about this?
Thank you.
Share Improve this question edited Jun 21, 2016 at 4:05 Hamza Zafeer 2,44613 gold badges35 silver badges47 bronze badges asked Feb 20, 2012 at 7:43 GrahamGraham 1,4733 gold badges21 silver badges34 bronze badges 4- Have you looked how other websites do it? Stackoverflow has a nice way of handling images, but while writing, users only see the link to the image text in the textarea, not the actual image. – Konerak Commented Feb 20, 2012 at 7:45
- Why does it get plicated? I don't get it. Can you post some relevant code? – elclanrs Commented Feb 20, 2012 at 7:47
- What i understood is you want to preview an image before its uploaded... If it is you can follow my answer :) – Django Anonymous Commented Feb 20, 2012 at 7:48
- Either way it's fine. I just want something functional right now. What coding approach would be most efficient to do this? I'm stuck on how to place it in an exact specified loc in the textarea. – Graham Commented Feb 20, 2012 at 7:49
2 Answers
Reset to default 7Use 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 the preview: http://jsbin./uboqu3/edit#javascript,html,live
I think it can help you.
You would use the HTML5 filereader: http://dev.w3/2006/webapi/FileAPI/#filereader-interface
A better working example, Copied from http://www.html5rocks./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./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>