Ajax图片上传，其中图片获取日期时间戳添加到FILENAME中，图片标题通过MYSQL插入

编程入门行业动态更新时间:2024-10-11 07:27:54

本文介绍了Ajax图片上传，其中图片获取日期时间戳添加到FILENAME中，图片标题通过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.

hayageek/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.