问题
Is there any AJAX PHP Jquery MySQL plugin that you can upload multiple files (preferably drag-drop), that add's datetimestamp to the actual FILENAME (where it stores in a folder on the server). Also where you can choose a tile and description that inserts into a MySQL database (the mysql row is going to have the columns as follows: USER_ID,IMAGE_FILENAME,TITLE,DESCRIPTION). I am attempting to make a database for the pictures for my users of my user-based website.
http://hayageek.com/drag-and-drop-file-upload-jquery/
I've tried modding this properly, just couldn't get it to work...I like the design, functions aren't quite there. Any ideas or suggestions that meet my question?
<h1>Source Javascript</h1>
function sendFileToServer(formData,status)
{
var uploadURL ="<? echo $dyn_www; ?>/php_parsers/upload.php"; //Upload URL
var extraData ={}; //Extra Data.
var jqXHR=$.ajax({
xhr: function() {
var xhrobj = $.ajaxSettings.xhr();
if (xhrobj.upload) {
xhrobj.upload.addEventListener('progress', function(event) {
var percent = 0;
var position = event.loaded || event.position;
var total = event.total;
if (event.lengthComputable) {
percent = Math.ceil(position / total * 100);
}
//Set progress
status.setProgress(percent);
}, false);
}
return xhrobj;
},
url: uploadURL,
type: "POST",
contentType:false,
processData: false,
cache: false,
data: formData,
success: function(data){
status.setProgress(100);
$("#status1").append("");
}
});
status.setAbort(jqXHR);
}
var rowCount=0;
function createStatusbar(obj)
{
rowCount++;
var row="odd";
var filename = this.filename;
if(rowCount %2 ==0) row ="even";
this.statusbar = $("<div class='statusbar "+row+"'></div>");
this.filename = $("<div class='filename'></div>").appendTo(this.statusbar);
this.size = $("<div class='filesize'></div>").appendTo(this.statusbar);
this.progressBar = $("<div class='progressBar'><div></div></div>").appendTo(this.statusbar);
this.abort = $("<div class='abort'>Abort</div>").appendTo(this.statusbar);
this.success = $("<i style=\"color:#009900;display:none\" class=\"fa fa-check-circle\"></i>").appendTo(this.statusbar);
this.titleOfImage = $("<div class='title'><input name='image_file_name' value='"+file_date+"' /><button id=\"title_button_"+row+"\" type=\"submit\"><i class=\"fa fa-chevron-circle-right\"></i></div></div>").appendTo(this.statusbar);
obj.after(this.statusbar);
this.setFileNameSize = function(name,size)
{
var sizeStr="";
var sizeKB = size/1024;
if(parseInt(sizeKB) > 1024)
{
var sizeMB = sizeKB/1024;
sizeStr = sizeMB.toFixed(2)+" MB";
}
else
{
sizeStr = sizeKB.toFixed(2)+" KB";
}
this.filename.html(name);
this.size.html(sizeStr);
}
this.setProgress = function(progress)
{
var progressBarWidth =progress*this.progressBar.width()/ 100;
this.progressBar.find('div').animate({ width: progressBarWidth }, 10).html(progress + "% ");
if(parseInt(progress) >= 100)
{
this.abort.hide();
this.success.show();
this.titleOfImage.show();
}
}
this.setAbort = function(jqxhr)
{
var sb = this.statusbar;
this.abort.click(function()
{
jqxhr.abort();
sb.hide();
});
}
}
function handleFileUpload(files,obj)
{
for (var i = 0; i < files.length; i++)
{
var d = new Date();
var curr_date = d.getDate();
var curr_month = d.getMonth() + 1; //Months are zero based
var curr_year = d.getFullYear();
var fulldatetime = ""+ curr_date + "-" + curr_month + "-" + curr_year +"";
var filename = files[i].name;
var ext = filename.substring(filename.lastIndexOf(".")+1).toLowerCase();
var allowed= "";
if(ext == "jpg" || ext == "png" || ext == "gif" || ext == "jpeg")
{
var fd = new FormData();
fd.append('file', files[i]);
var status = new createStatusbar(obj); //Using this we can set progress.
status.setFileNameSize(files[i].name,files[i].size);
sendFileToServer(fd,status);
}else
{
alert("You are only allowed to upload .jpg, .png, & .gif");
}
} //end for
}
$(document).ready(function()
{
var obj = $("#dragandrophandler");
obj.on('dragenter', function (e)
{
e.stopPropagation();
e.preventDefault();
$(this).css('border', '2px solid #0B85A1');
});
obj.on('dragover', function (e)
{
e.stopPropagation();
e.preventDefault();
});
obj.on('drop', function (e)
{
$(this).css('border', '2px dotted #0B85A1');
e.preventDefault();
var files = e.originalEvent.dataTransfer.files;
//We need to send dropped files to Server
handleFileUpload(files,obj);
});
$(document).on('dragenter', function (e)
{
e.stopPropagation();
e.preventDefault();
});
$(document).on('dragover', function (e)
{
e.stopPropagation();
e.preventDefault();
obj.css('border', '2px dotted #0B85A1');
});
$(document).on('drop', function (e)
{
e.stopPropagation();
e.preventDefault();
});
});
</script>
回答1:
Together with your code, try:
Replace this block:
/*
var d = new Date();
var curr_date = d.getDate();
var curr_month = d.getMonth() + 1; //Months are zero based
var curr_year = d.getFullYear();
var fulldatetime = ""+ curr_date + "-" + curr_month + "-" + curr_year +"";
*/
With:
var d = new Date();
var fulldatetime = d.getDate() + "-"
+ (d.getMonth()+1) + "-"
+ d.getFullYear() + "--"
+ d.getHours() + "-"
+ d.getMinutes() + "-"
+ d.getSeconds();
And then:
var filename = files[i].name;
var ext = filename.substring(filename.lastIndexOf(".")+1).toLowerCase();
/* this line added */
var file_date = fulldatetime+'_'+filename;
var allowed= "";
if(ext == "jpg" || ext == "png" || ext == "gif" || ext == "jpeg")
{
var fd = new FormData();
fd.append('file', files[i]);
/* this line added */
fd.append('fileDateTime',file_date);
var status = new createStatusbar(obj); //Using this we can set progress.
The rest of your code remains the same. You can address the new file name with $_POST['fileDateTime']; on your upload.php
Addition:
To pass the renamed file to createStatusbar(), change the function definition:
from:
/* function createStatusbar(obj) */
to:
function createStatusbar(obj,file_date)
and during it's call:
/* var status = new createStatusbar(obj); //Using this we can set progress.*/
to:
var status = new createStatusbar(obj,file_date); //Using this we can set progress.
file_date is the variable that holds the new file name, you can then use it as you need.
来源：https://stackoverflow.com/questions/22433129/ajax-image-upload-where-image-gets-datetimestamp-added-to-filename-and-image-tit