Ajax图片上传，其中图片获取日期时间戳添加到FILENAME中，图片标题通过MYSQL插入 [英] Ajax image upload where image gets datetimestamp added to FILENAME and image title get's inserted through MYSQL

问题描述

是否有任何AJAX PHP Jquery MySQL插件，您可以上传多个文件(最好是拖放操作)，并将其datetimestamp添加到实际的FILENAME(文件名存储在服务器上的文件夹中).您还可以在其中选择插入到MySQL数据库中的图块和说明(mysql行将具有以下列:USER_ID，IMAGE_FILENAME，TITLE，DESCRIPTION).我正在尝试为基于用户的网站的用户创建图片数据库.

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>

推荐答案

与您的代码一起，尝试:

Together with your code, try:

替换此块:

/*
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 d = new Date();
    var fulldatetime = d.getDate() + "-"
    + (d.getMonth()+1)  + "-" 
    + d.getFullYear() + "--"  
    + d.getHours() + "-"  
    + d.getMinutes() + "-" 
    + d.getSeconds();

然后:

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.

其余代码保持不变.您可以在upload.php

The rest of your code remains the same. You can address the new file name with $_POST['fileDateTime']; on your upload.php

要将重命名的文件传递给createStatusbar()，请更改函数定义:

To pass the renamed file to createStatusbar(), change the function definition:

来自:

/* function createStatusbar(obj) */

收件人:

function createStatusbar(obj,file_date)

在通话期间:

/* var status = new createStatusbar(obj);  //Using this we can set progress.*/

收件人:

var status = new createStatusbar(obj,file_date); //Using this we can set progress.

file_date是保存新文件名的变量，然后您可以根据需要使用它.

file_date is the variable that holds the new file name, you can then use it as you need.

这篇关于Ajax图片上传，其中图片获取日期时间戳添加到FILENAME中，图片标题通过MYSQL插入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！