javascript - 从迷你上传表单返回新文件名

标签 javascript php jquery ajax jquery-file-upload

我正在使用Mini AJAX Upload Form将文件上传到服务器。我修改了上传代码以在文件末尾添加时间戳。如何将新的文件名(带有时间戳)返回给客户端供以后使用?

date_default_timezone_set('America/New_York'); 
$date = date('.YmdHis');
// A list of permitted file extensions
$allowed = array('sqlite', 'db', 'db3');
if(isset($_FILES['upl']) && $_FILES['upl']['error'] == 0){

    $extension = pathinfo($_FILES['upl']['name'], PATHINFO_EXTENSION);

    if(!in_array(strtolower($extension), $allowed)){
            echo '{"status":"error"}';
            exit;
    }

    $file =  '/var/www/html/uploads/'.$_FILES['upl']['name'].$date;

    if(move_uploaded_file($_FILES['upl']['tmp_name'], $file)){
            echo '{"status":"success"}';
            exit;
    }
}
echo '{"status":"error"}';
exit;

JS:

$(function(){

 $('#drop a').click(function(){
    // Simulate a click on the file input button
    // to show the file browser dialog
    $(this).parent().find('input').click();
 });

 // Initialize the jQuery File Upload plugin
 $('#upload').fileupload({

    url: 'includes/php/upload.php',

    // This element will accept file drag/drop uploading
    dropZone: $('#drop'),
 });

 // Prevent the default action when a file is dropped on the window
 $(document).on('drop dragover', function (e) {
    e.preventDefault();
 });
});

HTML 片段:

<div class="row">
 <div class="col-lg-12 text-center">
  <form id="upload" method="post" enctype="multipart/form-data">
   <div id="drop">
    <p>Drop Database Here</p>
    <a>Browse</a>
    <input type="file" name="upl" multiple/>
   </div>
  </form>
 </div>
</div>

注意:迷你 AJAX 上传表单使用 jQuery-File-Upload

最佳答案

您可以在上传后使用done回调来获取文件名,当然您需要将其写回php脚本中的ajax

done: function (e, data) {
            $("tr:has(td)").remove();
            $.each(data.result, function (index, file) {

                $("#uploaded-files").append(
                        $('<tr/>')
                        .append($('<td/>').text(file.fileName))
                        .append($('<td/>').text(file.fileSize))
                        .append($('<td/>').text(file.fileType))
                        .append($('<td/>').html("<a href='upload?f="+index+"'>Click</a>"))
                        .append($('<td/>').text("@"+file.twitter))

                        )//end $("#uploaded-files").append()
            }); 
        },

这个例子也是java例子,但他们做的事情与你所做的类似 http://hmkcode.com/java-servlet-jquery-file-upload/

关于javascript - 从迷你上传表单返回新文件名,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30176282/

相关文章:

javascript - 列表树结构切换不起作用

php - 在 OpenSUSE 12.1 上安装 phpize

php - Postfix : Bounce checking. 电子邮件通过管道传输到 php,但阻止电子邮件正确发送和接收

javascript - 获取之前的 URL 并在 Javascript 中显示在页面上

javascript - 在 JQuery 中防止多次点击

javascript - 隐藏然后显示基于选择值的 HTML

javascript - 想要将外部变量从 js 文件访问到 Angular 2 ts 文件中

javascript - 如何更好地定义 JQuery DataTables 的列渲染?

php - CActiveForm beforeValidate 不适用于 afterValidate

javascript - 获取在浏览器中显示的 iframe 主体的 innerHTML