below is my snippet, and what I'm trying to do is render the selected image (from the input file) to the specified image container ("#test_image") but unfortunately, it looks like missed up and sadly not working. Any ideas, help?
var prev_image;
$(document).ready(function(){
$("input[type='file']").change(function(){
//get the val of the previous image for the reset use later
prev_image = $("#test_image").attr("src");
//render the selected image on the image box (test_image)
$("#test_image").attr("src", $(this).val());
})
});
#test_image{
width: 100px;
height: 100px;
-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="test_image" src="data:image/jpg;base64,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"/>
<input type="file" />
HTML5 comes with File API spec, which allows you to create applications that let the user interact with files locally; That means you can load files and render them in the browser without actually having to upload the files. Part of the File API is the FileReader interface which lets web applications asynchronously read the contents of files .
var prev_image;
$(document).ready(function(){
$("input[type='file']").change(function(){
// handle input changes
prev_image = $("#test_image").attr("src");
// grab the first image in the FileList object and pass it to the function
renderImage(this.files[0])
});
});
// render the image in our view
function renderImage(file) {
// generate a new FileReader object
var reader = new FileReader();
// inject an image with the src url
reader.onload = function(event) {
the_url = event.target.result
$('#test_image').attr('src',the_url);
}
// when the file is read it triggers the onload event above.
reader.readAsDataURL(file);
}
#test_image{
width: 100px;
height: 100px;
-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="test_image" src="data:image/jpg;base64,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"/>
<input type="file" />
One of Sort trick
<input type="file" onchange="$('#test_image')[0].src = window.URL.createObjectURL(this.files[0])" />
here the fiddle
http://jsfiddle.net/LvsYc/7050/
You need to read the file using file api to set the src of the image
var prev_image;
$(document).ready(function() {
$("input[type='file']").change(function() {
//get the val of the previous image for the reset use later
prev_image = $("#test_image").prop("src");
var reader = new FileReader();
reader.onloadend = function() {
$("#test_image").prop("src", reader.result);
}
if (this.files && this.files[0]) {
reader.readAsDataURL(this.files[0]);
} else {
$("#test_image").prop("src", "");
}
})
});
#test_image {
width: 100px;
height: 100px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="test_image" src="data:image/jpg;base64,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"
/>
<input type="file" />
Use Html2Canvas for taking screen shot .Its very easy .. just include the html2canvas js files.. you will get from Here
and some simple codes . Refer this -> Click Here
It will work for you .
In your case you can use a temp image path.
Here is the fiddle: http://jsfiddle.net/swaprks/91Lphm16/
CSS:
#test_image{
width: 100px;
height: 100px;
-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;
}
JS:
var prev_image;
$(document).ready(function(){
$("input[type='file']").change(function(event){
var tmppath = URL.createObjectURL(event.target.files[0]);
//get the val of the previous image for the reset use later
prev_image = $("#test_image").attr("src");
//render the selected image on the image box (test_image)
$("#test_image").attr("src", tmppath);
})
});
HTML:
<img id="test_image" src="data:image/jpg;base64,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"/>
<input type="file" />
Try this. Do some tweeking as per your need
var prev_image;
$(document).ready(function(){
$("input[type='file']").change(function(){
var tmpImageData = new FileReader();
tmpImageData.onload = function (e) {
//get the val of the previous image for the reset use later
prev_image = $("#test_image").attr("src");
//render the selected image on the image box (test_image)
$("#test_image").attr("src", e.target.result);
}
tmpImageData.readAsDataURL(input.files[0]);
})
});
Related
I'm trying to add to localStorage the user-uploaded image and use it as persistent background-image of the page.
I already have here the feature to upload and change the background, but not the ability to save it to localStorage.. What's the way to do it?
Here's the code I have so far:
const frame = document.getElementById('frame');
const file = document.getElementById('file');
const reader = new FileReader();
const userUploadedBackground = document.getElementById('image');
const imgData = getBase64Image(userUploadedBackground);
localStorage.setItem("imgData", imgData);
reader.addEventListener("load", function() {
frame.style.backgroundImage = `url(${ reader.result })`;
}, false);
file.addEventListener('change', function() {
const image = this.files[0];
if (image) reader.readAsDataURL(image);
}, false)
#frame {
width: 200px;
height: 200px;
background-size: cover;
}
<input id='file' type='file' />
<div id='frame'></div>
Thank you in advance for any help.
To accomplish this, you would have to upload the photo somewhere and then store the url in local storage. Then you can load it using event listeners and apply to document.body.style in JS
I'm trying to add a multiple image up-loader which returns a JavaScript array that is populated by the user selecting images. I will be using this image up-loader with other input form elements which will all submit together, in this case i'm not using AJAX. The maximum file upload size is 2MB. The JavaScript array contains the base 64 encoded image with all the details including size, type etc.
I have used $('#j_son').val(JSON.stringify(AttachmentArray)); outside the array to populate the hidden input field everytime the array is populated (input unhidden to show JSON string). Lightweight Multiple File Upload with Thumbnail Preview using HTML5 and Client Side Scripts
On submit I will use PHP to decode the new JSON string and and put the multiple images in a folder called uploads.
The problem I am facing is that selecting image attachments larger than 200 KB seem to slow the output of images inside the div container and the JSON string inside the hidden input field and anything to large will cause "aw snap" error inside chrome and crash the browser, I don't know where I'm going wrong. I also have a click event that when the user clicks X remove button and the hidden input field is repopulated with the updated JSON array, this to is really slow and crashes if the files are to large. The PHP side of things has no problem decoding the JSON string it seems to either fall on the JavaScript code or the extra functionality I have added at the bottom of the script. Is there a way to stop this from happening? I have added the full code including the PHP if anybody wants to test it.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
/*Copied from bootstrap to handle input file multiple*/
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
/*Also */
.btn-success {
border: 1px solid #c5dbec;
background: #D0E5F5;
font-weight: bold;
color: #2e6e9e;
}
/* This is copied from https://github.com/blueimp/jQuery-File-
Upload/blob/master/css/jquery.fileupload.css */
.fileinput-button {
position: relative;
overflow: hidden;
}
.fileinput-button input {
position: absolute;
top: 0;
right: 0;
margin: 0;
opacity: 0;
-ms-filter: 'alpha(opacity=0)';
font-size: 200px;
direction: ltr;
cursor: pointer;
}
.thumb {
height: 80px;
width: 100px;
border: 1px solid #000;
}
ul.thumb-Images li {
width: 120px;
float: left;
display: inline-block;
vertical-align: top;
height: 120px;
}
.img-wrap {
position: relative;
display: inline-block;
font-size: 0;
}
.img-wrap .close {
position: absolute;
top: 2px;
right: 2px;
z-index: 100;
background-color: #D0E5F5;
padding: 5px 2px 2px;
color: #000;
font-weight: bolder;
cursor: pointer;
opacity: .5;
font-size: 23px;
line-height: 10px;
border-radius: 50%;
}
.img-wrap:hover .close {
opacity: 1;
background-color: #ff0000;
}
.FileNameCaptionStyle {
font-size: 12px;
}
</style>
<script type="text/javascript" src="scripts/jquery-1.10.2.js"></script>
<script type="text/javascript">
//I added event handler for the file upload control to access the files
properties.
document.addEventListener("DOMContentLoaded", init, false);
//To save an array of attachments
var AttachmentArray = [];
$('#j_son').val(JSON.stringify(AttachmentArray));
//counter for attachment array
var arrCounter = 0;
//to make sure the error message for number of files will be shown only
one time.
var filesCounterAlertStatus = false;
//un ordered list to keep attachments thumbnails
var ul = document.createElement('ul');
ul.className = ("thumb-Images");
ul.id = "imgList";
function init() {
//add javascript handlers for the file upload event
document.querySelector('#files').addEventListener('change',
handleFileSelect, false);
}
//the handler for file upload event
function handleFileSelect(e) {
//to make sure the user select file/files
if (!e.target.files) return;
//To obtaine a File reference
var files = e.target.files;
// Loop through the FileList and then to render image files as
thumbnails.
for (var i = 0, f; f = files[i]; i++) {
//instantiate a FileReader object to read its contents into
memory
var fileReader = new FileReader();
// Closure to capture the file information and apply validation.
fileReader.onload = (function (readerEvt) {
return function (e) {
//Apply the validation rules for attachments upload
ApplyFileValidationRules(readerEvt)
//Render attachments thumbnails.
RenderThumbnail(e, readerEvt);
//Fill the array of attachment
FillAttachmentArray(e, readerEvt)
};
})(f);
// Read in the image file as a data URL.
// readAsDataURL: The result property will contain the
//file/blob's data encoded as a data URL.
// More info about Data URI scheme
//https://en.wikipedia.org/wiki/Data_URI_scheme
fileReader.readAsDataURL(f);
}
document.getElementById('files').addEventListener('change',
handleFileSelect, false);
}
//To remove attachment once user click on x button
jQuery(function ($) {
$('div').on('click', '.img-wrap .close', function () {
var id = $(this).closest('.img-wrap').find('img').data('id');
//to remove the deleted item from array
var elementPos = AttachmentArray.map(function (x) { return
x.FileName; }).indexOf(id);
if (elementPos !== -1) {
AttachmentArray.splice(elementPos, 1);
}
//to remove image tag
$(this).parent().find('img').not().remove();
//to remove div tag that contain the image
$(this).parent().find('div').not().remove();
//to remove div tag that contain caption name
$(this).parent().parent().find('div').not().remove();
//to remove li tag
var lis = document.querySelectorAll('#imgList li');
for (var i = 0; li = lis[i]; i++) {
if (li.innerHTML == "") {
li.parentNode.removeChild(li);
}
}
});
}
)
//Apply the validation rules for attachments upload
function ApplyFileValidationRules(readerEvt)
{
//To check file type according to upload conditions
if (CheckFileType(readerEvt.type) == false) {
alert("The file (" + readerEvt.name + ") does not match the
upload conditions, You can only upload jpg/png/gif files");
e.preventDefault();
return;
}
//To check file Size according to upload conditions
if (CheckFileSize(readerEvt.size) == false) {
alert("The file (" + readerEvt.name + ") does not match the
upload conditions, The maximum file size for uploads should not
exceed 300 KB");
e.preventDefault();
return;
}
//To check files count according to upload conditions
if (CheckFilesCount(AttachmentArray) == false) {
if (!filesCounterAlertStatus) {
filesCounterAlertStatus = true;
alert("You have added more than 10 files. According to
upload conditions you can upload 10 files maximum");
}
e.preventDefault();
return;
}
}
//To check file type according to upload conditions
function CheckFileType(fileType) {
if (fileType == "image/jpeg") {
return true;
}
else if (fileType == "image/png") {
return true;
}
else if (fileType == "image/gif") {
return true;
}
else if (fileType == "image/jpg") {
return true;
}
else {
return false;
}
return true;
}
//To check file Size according to upload conditions
function CheckFileSize(fileSize) {
if (fileSize < 2000000) {
return true;
}
else {
return false;
}
return true;
}
//To check files count according to upload conditions
function CheckFilesCount(AttachmentArray) {
//Since AttachmentArray.length return the next available index in
//the array,
//I have used the loop to get the real length
var len = 0;
for (var i = 0; i < AttachmentArray.length; i++) {
if (AttachmentArray[i] !== undefined) {
len++;
}
}
//To check the length does not exceed 10 files maximum
if (len > 9) {
return false;
}
else
{
return true;
}
}
//Render attachments thumbnails.
function RenderThumbnail(e, readerEvt)
{
var li = document.createElement('li');
ul.appendChild(li);
li.innerHTML = ['<div class="img-wrap"> <span class="close">×
</span>' +
'<img class="thumb" src="', e.target.result, '" title="',
escape(readerEvt.name), '" data-id="',
readerEvt.name, '"/>' + '</div>'].join('');
var div = document.createElement('div');
div.className = "FileNameCaptionStyle";
li.appendChild(div);
div.innerHTML = [readerEvt.name].join('');
document.getElementById('Filelist').insertBefore(ul, null);
}
//Fill the array of attachment
function FillAttachmentArray(e, readerEvt)
{
AttachmentArray[arrCounter] =
{
AttachmentType: 1,
ObjectType: 1,
FileName: readerEvt.name,
FileDescription: "Attachment",
NoteText: "",
MimeType: readerEvt.type,
Content: e.target.result.split("base64,")[1],
FileSizeInBytes: readerEvt.size,
};
arrCounter = arrCounter + 1;
//THIS IS THE PART I ADDED TO POPULATE THE HIDDEN INPUT FIELD
$('#j_son').val(JSON.stringify(AttachmentArray));
}
//THIS IS TO UPDATE THE INPUT FIELD WHEN A FILE IS REMOVED
$(document).on('click', '.close', function(){
var myString = JSON.stringify(AttachmentArray);
$('#j_son').val(myString);
});
</script>
</head>
<body>
<div>
<label style="font-size: 14px;">
<span style='color:navy;font-weight:bold'>Attachment Instructions :
</span>
</label>
<ul>
<li>
Allowed only files with extension (jpg, png, gif)
</li>
<li>
Maximum number of allowed files 10 with 2 MB for each
</li>
<li>
you can select files from different folders
</li>
</ul>
<form method="POST" action="" enctype="multipart/form-data">
<span class="btn btn-success fileinput-button">
<span>Select Attachment</span>
<input type="file" name="files[]" id="files" multiple
accept="image/jpeg, image/jpg image/png, image/gif,"><br />
</span>
<!--input field to be populated by the array-->
<input type="text" name="j_son" id="j_son" style="width: 500px;">
<!--Submit and post to get decoded JSON string-->
<button type="submit" id="image_post" name="post_it">Submit</button>
</form>
<output id="Filelist"></output>
</div>
<?php
if(isset($_POST['post_it']))
{
//other input fields
$file = $_POST['j_son'];
$tempData = html_entity_decode($file);
$cleanData = json_decode($tempData, true);
foreach($cleanData as $p)
{
echo $p['Content']."</br>";
//insert code to uploads folder
}
}
?>
</body>
</html>
-- edit --
This may be because of a known issue in chrome. Try using a blob as recommended in this post
How can javascript upload a blob?
function uploadAudio( blob ) {
var reader = new FileReader();
reader.onload = function(event){
var fd = {};
fd["fname"] = "test.wav";
fd["data"] = event.target.result;
$.ajax({
type: 'POST',
url: 'upload.php',
data: fd,
dataType: 'text'
}).done(function(data) {
console.log(data);
});
};
reader.readAsDataURL(blob);
}
-- /edit --
ok it seems like you are adding an onChange event listener multiple times to the "files" id. Once in the init and once every time the handleFileSelect function is called. This could for sure be your slowdown problem.
Also, if you are going to have a file upload size that maxes out at 2MB you should set this in your PHP file using upload_max_filesize and also set post_max_size.
ini_set('upload_max_filesize', '2M');
ini_set('post_max_size', '2M');
from php.net:
upload_max_filesize
The maximum size of an uploaded file.
post_max_size
Sets max size of post data allowed. This setting also affects file upload. To upload large files, this value must be larger than upload_max_filesize. Generally speaking, memory_limit should be larger than post_max_size. When an integer is used, the value is measured in bytes.
Also if your upload ends up timing out you might also want to extend the execution time by using max_input_time or max_execution time though I think that max_input_time should be enough.
ini_set('max_input_time', 300);
ini_set('max_execution_time', 300);
max_input_time
This sets the maximum time in seconds a script is allowed to parse input data, like POST and GET. Timing begins at the moment PHP is invoked at the server and ends when execution begins. The default setting is -1, which means that max_execution_time is used instead. Set to 0 to allow unlimited time.
max_execution_time
This sets the maximum time in seconds a script is allowed to run before it is terminated by the parser. This helps prevent poorly written scripts from tying up the server. The default setting is 30. When running PHP from the command line the default setting is 0.
This needs to be added at the top of your PHP file before other output.
enter image description herepreview uploaded images after upload.and to show the image on the form.Want to achieve this with help of jquery image upload with Laravel framework. help is appreciated.
#Simon I have implemented ur code.its working,but one image is shown in view and i want to show all three images,which are selected.Plz helpenter image description here
if you using the standard file input type and say your using a moderish browser etc then you could try the following.
$('#addImage').on('change', function(evt) {
var selectedImage = evt.currentTarget.files[0];
var imageWrapper = document.querySelector('.image-wrapper');
var theImage = document.createElement('img');
imageWrapper.innerHTML = '';
var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
if (regex.test(selectedImage.name.toLowerCase())) {
if (typeof(FileReader) != 'undefined') {
var reader = new FileReader();
reader.onload = function(e) {
theImage.id = 'new-selected-image';
theImage.src = e.target.result;
imageWrapper.appendChild(theImage);
}
//
reader.readAsDataURL(selectedImage);
} else {
//-- Let the user knwo they cannot peform this as browser out of date
console.log('browser support issue');
}
} else {
//-- no image so let the user knwo we need one...
$(this).prop('value', null);
console.log('please select and image file');
}
});
.wrapper {
padding: 25px;
}
.image-wrapper {
padding: 5px;
border: 1px #ddd solid;
height auto;
width: 200px;
}
.image-wrapper img {
max-width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<input type="file" id="addImage" />
</div>
<div class="image-wrapper">
</div>
also viewable on codepen Exmaple
Hello guys i found this amazing drag and drop and resize image and i am trying to add a custom modification. I added an upload button so user can upload a photo.
i added the function bellow to find the last img id, create a new one and replace the latest id and img source. The user's photo uploading well but it's not draggable and resizable like other objects.
Official projects link is: http://tympanus.net/Tutorials/ImageVampUp/
The code that i added is:
<script>
$(document).ready(function() {
$("input").change(function(e) {
for (var i = 0; i < e.originalEvent.srcElement.files.length; i++) {
var file = e.originalEvent.srcElement.files[i];
var reader = new FileReader();
reader.onloadend = function() {
var newoid = parseInt($("#objects .obj_item:last img").attr("ID").split("_")[1], 10) + 1;
var newoimage = reader.result;
$("#objects").append("<div class='obj_item' style='width:80px; height:80px; float:left; margin-left:5px; margin-top:5px;'><img id='"+newoid+"' width='80' height='80' class='ui-widget-content' src='"+newoimage+"' alt='el'/></div>");
//$('#obj_25').attr('src', reader.result);
}
reader.readAsDataURL(file);
}
});
});
</script>
and inside projects left bar i added a div with an input so user can load the pic:
<input type='file' onchange="readURL(this);" />
Just invoke the following putting it in a function after the image is appended:
$('#objects img:last').resizable({
/* only diagonal (south east) */
handles : 'se',
stop : resizestop
}).parent('.ui-wrapper').draggable({
revert : 'invalid'
});
I was wondering if this is possible.
I want to create a function to retrieve an image and insert into an iframe. The user must be able to choose a file (image/video) and it will be inserted into an iframe.
main.html
<input type="file" id="addImage"> I have used this for the user to choose a file.
<iframe class="frame" id="frame" src="insert.html"></iframe> And this for the iframe. The iframe src is another html document.
insert.html
<span id="edit"></span> is within the insert.html where the image needs to be inserted to.
I don't quite understand how javascript can be used to retrieve the image from the users selection and insert into the iframe.
Is this possible?
Yes, here is an example. The key is to hook onto the iframe and then use its contentWindow.
EDIT
Additionally, I don't know if you meant the browse for file or the drag'n'drop API so I implemented both.
Lots of help from these sources:
file-api : How to interact with the file-api
drag-drop events : Events to key off of when dragging and dropping
And here is a fiddle:
JSFiddle
CSS
*{
font-family: Arial;
}
.section{
width: 400px;
padding: 20px;
margin: auto;
}
#dragDiv{
background-color: #ffffcc;
}
#browseDiv{
background-color: #ccffcc;
}
#iframeDiv{
background-color: #ffcccc;
}
#dropTarget{
width: 300px;
height: 300px;
border-style: dashed;
border-width: 5px;
}
.dropEnabled{
border-color: #999999;
}
.dropEnabled:hover{
border-color: #ff9933;
}
.dropMe{
border-color: #99ff99;
}
JS
/**
* I set up the listeners for dragging and dropping as well
* as creating an iFrame for holding dragged in images
* #returns {undefined}
*/
function main() {
// The div that receives drops and the new iFrame
var targetDiv = document.getElementById("dropTarget"),
iframe = document.createElement("iframe");
// Set the iframe to a blank page
iframe.src = "about:blank";
// Append it to the target
document.getElementById("iframeTarget").appendChild(iframe);
// Drag over is when an object is hovering over the div
// e.preventDefault keeps the page from changing
targetDiv.addEventListener("dragover", function(e) {
e.preventDefault();
this.className = "dropMe";
}, false);
// Drag leave is when the object leaves the div but isn't dropped
targetDiv.addEventListener("dragleave", function(e) {
e.preventDefault();
this.className = "dropEnabled";
}, false);
// Drop is when the click is released
targetDiv.addEventListener("drop", function(e) {
e.preventDefault();
this.className = "dropEnabled";
loadFile(e.dataTransfer.files[0], iframe);
}, false);
document.getElementById("upload").addEventListener("click", function() {
var file = document.getElementById("browsedFile").files[0];
loadFile(file, iframe);
}, false);
}
/**
* Load a file and then put it on an ifrmae
* #param {Element} f The file that needs to get loaded
* #param {Element} destination The iframe that the file is appended to
* #returns {undefined}
*/
function loadFile(f, destination) {
// Make a file reader to interpret the file
var reader = new FileReader();
// When the reader is done reading,
// Make a new image tag and append it to the iFrame
reader.onload = function(event) {
var newImage = document.createElement("img");
newImage.src = event.target.result;
destination.contentWindow.document.getElementsByTagName("body")[0].appendChild(newImage);
};
// Tell the reader to start reading asynchrounously
reader.readAsDataURL(f);
}
// Run the main script
window.onload = main;
HTML
<!DOCTYPE html>
<html>
<head>
<title>I framed it</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div id="dragDiv" class="section">
<div>The div below receives dragged in files</div>
<div id="dropTarget" class="dropEnabled"></div>
</div>
<div id="browseDiv" class="section">
<div>I upload stuff the boring way</div>
<input type="file" id="browsedFile"><button id="upload">Upload</button>
</div>
<div id="iframeDiv" class="section">
<div>And below me, an iFrame gets created</div>
<div id="iframeTarget"></div>
</div>
</body>
</html>
And here is the result:
And the DOM:
EDIT
A comment was made about how to do this with videos as well. There are several ways to do it, but here is one way that I would do it using the HTML5 <vido> tag which you can find more information on here: HTML Videos.
One tricky thing that I'm sure is rather cludgy is how to say what kind of file you should be loading. I use a switch() on the file's type attribute which usually evaluates to something like: image/png or video/mp4 for MP4 videos. However, this ties you to a specific file format. A better way to do it would be to make a regular expression that figures out if it's just an image or a video and ignore the format since the process is rougly the same for all files of those types.
I added my own regular expression implementation. Probably, not the best, but it allows all appropriate image types to come through now.
Also, I tried using some sample videos from Apple which can be found here: Sample QuickTime Movies. However, those did not work for some reason. So after that, I just downloaded the sample videos that W3Schools uses in their tutorial. I'm telling you this so that in case you try it and it doesn't work, it might be the file itself and not your code.
Edited loadFile() Function
/**
* Load a file and then put it on an ifrmae
* #param {Element} f The file that needs to get loaded
* #param {Element} destination The iframe that the file is appended to
* #returns {undefined}
*/
function loadFile(f, destination) {
// Make a file reader to interpret the file
var reader = new FileReader(),
loaderFunc = null,
typeRegEx = /^(\w+)\//,
contentType = f.type.match(typeRegEx)[1];
// Figure out how to load the data
switch (contentType) {
case "video":
loaderFunc = function(event) {
var newVideo = document.createElement("video"),
newVideoSource = document.createElement("source");
newVideo.width = 300;
newVideo.height = 300;
newVideo.setAttribute("controls");
newVideoSource.src = event.target.result;
newVideoSource.type = f.type;
destination.contentWindow.document.getElementsByTagName("body")[0].appendChild(newVideo);
newVideo.appendChild(newVideoSource);
};
break;
case "image":
loaderFunc = function(event) {
var newImage = document.createElement("img");
newImage.src = event.target.result;
destination.contentWindow.document.getElementsByTagName("body")[0].appendChild(newImage);
};
break;
default:
console.log("Unknown file type");
return;
}
// We should have returned, but just make sure
if (loaderFunc) {
// When the reader is done reading,
// Make a new image tag and append it to the iFrame
reader.onload = loaderFunc;
// Tell the reader to start reading asynchrounously
reader.readAsDataURL(f);
}
}
You can manipulate directly an iframe from an other if they are from same domain.
See jQuery/JavaScript: accessing contents of an iframe
What you can do if this is not the case is :
Setting up a communication process between both pages (see How to communicate between iframe and the parent site?)
or
Uploading your file to a server, and refresh the "insert.html" page to display the uploaded image.