multi-upload script

Destramic · November 2, 2014

hey guys im trying to make a file upload script so that when the user uploads a pic it gets shown in a div...when you add another it is the added by the side of the 1st pic...but some reason when selecting a image nothing shows...

what am i doing wrong?

here is my code below if anyone can tell me what it is wrong im doing...thank you

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script>
$( document ).ready(function() {
	
	var files       = $('.input-file').prop("files");
	var file_count  = files.length;
	
	var names = $.map(files, function(val) { 
		return val.name; 
	});
	
	$('#input-file-button').click(function() {
		$('.input-file').click(); 
	});
	
	$('.input-file').change(function (){
		var file_name = $(this).val();
		var file_path = URL.createObjectURL(event.target.files[0]);

		$('#uploaded-images').append('<div><img src="'+ file_path +'" /></div>' + file_name);	
	 });
		
	if (file_count < 1)
	{
		$('#uploaded-images').text("No images are selected.");
	}
});


</script>
<style>
.input-file
{
	display: none;
}
</style>
</head>
<body>
<div id="uploaded-images"></div>
<br />
<input type="file" name="files[]" class="input-file"/><span id='input-file-button'>Upload Photo</span>
</body>
</html>

Sign In

multi-upload script

Recommended Posts

Destramic

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information