Skip to content

Instantly share code, notes, and snippets.

@Ammly

Ammly/file_upload.html

Created June 17, 2016 06:41
Show Gist options
  • Save Ammly/b582531801e57ba0efddd901ee798b91 to your computer and use it in GitHub Desktop.
Save Ammly/b582531801e57ba0efddd901ee798b91 to your computer and use it in GitHub Desktop.
Download ZIP
Upload file using jquery file upload lib. autosubmit:false
Raw
file_upload.html
<html>
<head>
<link href="https://rawgithub.com/hayageek/jquery-upload-file/master/css/uploadfile.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://rawgithub.com/hayageek/jquery-upload-file/master/js/jquery.uploadfile.min.js"></script>
</head>
<body>
<div class="container">
<form action="" class="form">
<textarea class="form-contol" contenteditable data-emojiable="true" placeholder="Type a message here"
id="send_to_topic_message" name="send_to_topic_message" background="#000000">
</textarea>
<div id="fileuploader">Upload</div>
<button type="submit" id="uploadbtn">Upload</button>
</form>
</div>
<script>
$(document).ready(function() {
var extraObj = $("#fileuploader").uploadFile({
url:"upload.php",
fileName:"myfile",
acceptFiles:"image/*",
maxFileCount:3,
maxFileSize:100*1024,
autoSubmit:false,
showPreview:true,
previewHeight: "50px",
previewWidth: "50px",
returnType: "json",
showDelete: true,
showDownload:true,
statusBarWidth:500,
dragdropWidth:500,
deleteCallback: function (data, pd) {
for (var i = 0; i < data.length; i++) {
$.post("delete.php", {op: "delete",name: data[i]},
function (resp,textStatus, jqXHR) {
//Show Message
alert("File Deleted");
});
}
pd.statusbar.show(); //You choice.
},
downloadCallback:function(filename,pd)
{
location.href="download.php?filename="+filename;
}
});
$("#uploadbtn").click(function(){
extraObj.startUpload();
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment