Admin Control Panel v2.0

✎ Editing: jsonupload.blade.php ← Back

<!DOCTYPE html>

<html>

<head>

<title>HTML5 Multiple file Ajax Upload</title>

<style>

#uploaded_images {width: 800px;margin: 0 auto}

#uploaded_images div{float:left;padding-left: 10px;}

.hide{display:none}

</style>

</head>

<body>

</form>

</div>

<button onclick="Uploader.upload();" class="btn btn-primary btn-lg">Upload Files</button>

</div>

<div>

</div>

</div>

var Uploader = (function () {

jQuery('#upload_files').on('change', function () {

jQuery("#wait").removeClass('hide');

jQuery('#upload_files').parent('form').submit();

});

var fnUpload = function () {

jQuery('#upload_files').trigger('click');

}

var fnDone = function (data) {

var data = JSON.parse(data);

if (typeof (data['error']) != "undefined") {

jQuery('#uploaded_images').html(data['error']);

jQuery('#upload_files').val("");

jQuery("#wait").addClass('hide');

return;

}

var divs = [];

for (i in data) {

// alert(data[i]);

divs.push("<div><img src='" + data[i] + "' style='height:100px' class='img-thumbnail'></div>");

}

jQuery('#uploaded_images').html(divs.join(""));

jQuery('#upload_files').val("");

jQuery("#wait").addClass('hide');

}

return {

upload: fnUpload,

done: fnDone

}

}());

</script>

<H2>Click to Upload</H2>

</div>

</form>

$('#imageform').ajaxForm( {

dataType : 'json',

beforeSubmit: function() {

$(this).addClass('loading');

$('#uploadBox').html('<div id="progressOverlay"><div class="progress progress-striped"><div class="bar" id="progressBar" style="width: 0%;">0%</div></div></div>');

uploadProgress: function ( event, position, total, percentComplete ) {

if (percentComplete == 100) {

$('#progressBar').css('width',percentComplete+'%').html('Processing...');

} else {

$('#progressBar').css('width',percentComplete+'%').html(percentComplete+'%');

}

success : function ( json ) {

//Your Custom JS Code Here

}

});

</script>

<?php

if (isset($_FILES["photoimg"])) {

// Your Custom PHP Code Here

$return = json_encode($_FILES["photoimg"]);

echo $return;

}

</body>

</html>

Cancel