上传进度，当上传多个文件(Upload Progress when upload multiple

我要上传多文件（超过1000个文件，总大小超过2GB）。 在PHP中，我使用的功能

if (move_uploaded_file($_FILES['files']['tmp_name'][$i], $original_file))
                    {
                        $stamp = '../contents/wm_watermark.png';
                        $this->create_watermark_photo($original_file, $stamp, $view_file, $ext);
                        $this->makeThumbnail($view_file, $thumb_file, $this->max_width_thumb, $this->max_width_thumb);

                        //insert photo info to DB
                        $this->Photo->create();
                        $this->Photo->save(
                            array(
                                'Photo' =>  array(
                                    'folder_id' =>  $data_from_preparing_fileInfoList[$i]['sub'],
                                    'name'      =>  $filename
                                )
                            )
                        );

                        $status = '1';
                        $count++;
                    }

我发现，当使用move_upload_file，它没有上传现在。 它只保持等待堆栈。 当此功能completedly运行，然后将其移动到文件服务器。 所以，当我使用的上传过程中，获得100％，这一个AJAX网址仍然可以运行。

$("#image_upload_form").ajaxSubmit({
                    //url: '/admin/photoGroup/ajax_upload_photo', //photo upload process bar
                    type: 'POST',
                    dataType: 'json',
                    data: { data_from_preparing: data_from_preparing},
                    beforeSend: function() {
                        //dialog 1
                        $("#upload-photo-process .progress-bar").css('width', '0');
                        $('#upload-photo-process').modal('show');

                    },
                    /* progress bar call back*/
                    uploadProgress: function(event, position, total, percentComplete) {
                        console.log('percentComplete' + percentComplete);
                        console.log('position: ' + position);
                        console.log('total' + total);
                        var mbPosition = position / 1024 / 1024;
                        var mbTotal = total / 1024 / 1024;
                        var txtProcess = percentComplete + '% | ' + mbPosition + 'Mb/' + mbTotal + 'Mb';
                        var pVel = percentComplete + '%';
                        $("#upload-photo-process .process-status").html(txtProcess);

                        $("#upload-photo-process .progress-bar").css('width', pVel);

                    },

                    /* complete call back */
                    complete: function(xhr) {
                        if (xhr.statusText == "OK") {
                            $('#upload-photo-process').modal('hide');
                            $('#upload-done').modal('show');
                        }

                    }
                    /*success: function(data_from_photo_upload) {

                    }*/

                });

现在，我想，当上传进度增益100％，所有上传到服务器的文件。 我怎么可以呢？ 感谢先进。

Answer 1:

试试这个，可能工作..

  //attach function sendFileToServer(formData, status, file) { var uploadURL = "index.php?p=ticket-attach&ajax=1"; //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, dataType: "json", success: function(data) { if (data['error'] == "") { status.setProgress(100); status.setFileNameSize(data['fname'].split(",")[0], file.size); status.appendFN(data['fname']); //var namef= ; } else { //alert(data['error']); status.errorMsg(); } } }); status.setAbort(jqXHR); } function createStatusbar(obj) { this.statusbar = $("<div class='statusbar' id=''></div>"); this.filename = $("<div class='filename'></div>").appendTo(this.statusbar); this.size = $("<div class='filesize'></div>").appendTo(this.statusbar); this.abort = $("<div class='abort'>&times;</div>").appendTo(this.statusbar); this.progressBar = $("<div class='progressBar'><div></div></div>").appendTo(this.statusbar); obj.append(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.statusbar.attr("sizev", size); $("#attach_size").attr("sizev", parseInt($("#attach_size").attr("sizev")) + size); this.setTotalSize(); } this.setTotalSize = function() { //set total size var size = parseInt($("#attach_size").attr("sizev")); 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"; } if (sizeStr != "" && size > 0) $("#attach_size").html("(" + sizeStr + ")"); else $("#attach_size").html(""); } 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.progressBar.hide(); if ($.isFunction(tinymce.get)) tinymce.get('mail_body').isNotDirty = 0; $("#save_status").html("Not saved"); //this.abort.hide(); } else { if ($.isFunction(tinymce.get)) tinymce.get('mail_body').isNotDirty = 1; $("#save_status").html("Not saved"); } } this.setAbortFD = function() { var sb = this.statusbar; var ts = this; this.abort.click(function() { $.ajax({ type: "POST", url: "index.php?p=ticket-dattach&ajax=1", data: "fname=" + sb.children(".filename").children("input").val(), //dataType: "json", success: function(data) { tinymce.get('mail_body').isNotDirty = 0; $("#save_status").html("Not saved"); }, error: function() { alert('File is not deleted'); } }); //alert(sb.children(".filename").children("input").val()); $("#attach_size").attr("sizev", (parseInt($("#attach_size").attr("sizev")) - parseInt(sb.attr("sizev")))); sb.remove(); ts.setTotalSize(); }); } this.setAbort = function(jqxhr) { var sb = this.statusbar; var ts = this; this.abort.click(function() { jqxhr.abort(); if (sb.children(".progressBar").children("div").html() == "100%") { $.ajax({ type: "POST", url: "index.php?p=ticket-dattach&ajax=1", data: "fname=" + sb.children(".filename").children("input").val(), //dataType: "json", success: function(data) { tinymce.get('mail_body').isNotDirty = 0; $("#save_status").html("Not saved"); }, error: function() { alert('File is not deleted'); } }); $("#attach_size").attr("sizev", (parseInt($("#attach_size").attr("sizev")) - parseInt(sb.attr("sizev")))); sb.remove(); } else { sb.remove(); } ts.setTotalSize(); }); } this.appendFN = function(fn) { this.filename.append("<input type=\"hidden\" name=\"ticket_attach[]\" value=\"" + fn + "\" />"); } this.errorMsg = function() { var sb = this.statusbar; sb.children(".progressBar").children("div").html("File Error"); sb.children(".progressBar").show(); sb.children(".filename").children("input").remove() } } function toggle_class(clas) { $("." + clas).toggle(); } function insert_attach(input) { var files = input.files; $.each(files, function(idx, file) { var fd = new FormData(); fd.append('ticket_attach', file); var obj = $(".note-attachbox"); var status = new createStatusbar(obj); //Using this we can set progress. status.setFileNameSize(file.name, file.size); sendFileToServer(fd, status, file); }); $("#afile_browser").val(""); } 

 .abort { color: red; cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div class="note-attachbox" id="attachbox" style="position: relative; display: inline;"></div> <input type='file' id='afile_browser' onchange='return insert_attach(this);' style="opacity: 0; position: relative; display: inline; cursor: pointer; width: 100px; padding: 1px 0px; border: medium none;" multiple> <div style="cursor: pointer; color: rgb(59, 179, 36); display: inline-block; font-weight: bold; font-size: 20px; vertical-align: middle; background: none; width: auto; padding: 5px 0px; margin-left: -105px;">+<i style="font-size: 15px; font-weight: normal;">Attach files<span id="attach_size" sizev="0"></span ></i> </div> 

Answer 2:

你好，你可以按照下面的方法来完成它。

我已经尽我所能，让这个例子尽可能简单。

您需要实现在你的代码这种方法来达到的结果。

在下面的代码是工作和测试。

用户

包含用户信息的用户名，密码，电子邮件，profile_image和profile_image_small等。

CREATE TABLE `users` (
`user_id` int(11) AUTO_INCREMENT PRIMARY KEY,
`username` varchar(255) UNIQUE KEY,
`password` varchar(100),
`email` varchar(255) UNIQUE KEY
)

用户上传

包含用户上传的细节upload_id，IMAGE_NAME，user_id_fk（外键）和时间戳等。

CREATE TABLE  `user_uploads` (
`upload_id` int(11) AUTO_INCREMENT PRIMARY KEY,
`image_name` text,
`user_id_fk` int(11),
`created` int(11)
) 

JavaScript代码

$（ “＃photoimg”）生活（ '变'，函数（）{}） - photoimg是输入文件标签的$（ '＃imageform'）的ID名称，并给ajaxForm（） - imageform是FORM的ID名称。 虽然改变了输入它调用表单提交，而无需使用给ajaxForm（）方法提神页。 上传的图片会在前面加上#preview标签内。

<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.wallform.js"></script>
<script type="text/javascript">
$(document).ready(function()
{

$('#photoimg').live('change', function()
 {
var A=$("#imageloadstatus");
var B=$("#imageloadbutton");

$("#imageform").ajaxForm({target: '#preview',
beforeSubmit:function(){
A.show();
B.hide();
},
success:function(){
A.hide();
B.show();
},
error:function(){
A.hide();
B.show();
} }).submit();
});

});
</script>

这里隐藏和显示基于表单上传提交状态#imageloadstatus和#imageloadbutton。

的index.php

包含简单的PHP和HTML代码。 这里$ SESSION_ID = 1表示用户ID会话值。

<?php
include('db.php');
session_start();
$session_id='1'; // User login session value
?>
<div id='preview'>
</div>
<form id="imageform" method="post" enctype="multipart/form-data" action='ajaxImageUpload.php' style="clear:both">
Upload image: 
<div id='imageloadstatus' style='display:none'><img src="loader.gif" alt="Uploading...."/></div>
<div id='imageloadbutton'>
<input type="file" name="photos[]" id="photoimg" multiple="true" />
</div>
</form>

ajaxImageUpload.php

包含PHP代码。 该脚本可以帮助您将图像上传到上传文件夹，将图像文件重命名为时间戳+ session_id.extention格式，以避免重复。 该系统将图像文件存储到与用户会话ID表user_uploads

<?php
error_reporting(0);
session_start();
include('db.php');
$session_id='1'; //$session id
define ("MAX_SIZE","2000"); // 2MB MAX file size
function getExtension($str)
{
$i = strrpos($str,".");
if (!$i) { return ""; }
$l = strlen($str) - $i;
$ext = substr($str,$i+1,$l);
return $ext;
}
// Valid image formats 
$valid_formats = array("jpg", "png", "gif", "bmp","jpeg");
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST")
{
$uploaddir = "uploads/"; //Image upload directory
foreach ($_FILES['photos']['name'] as $name => $value)
{
$filename = stripslashes($_FILES['photos']['name'][$name]);
$size=filesize($_FILES['photos']['tmp_name'][$name]);
//Convert extension into a lower case format
$ext = getExtension($filename);
$ext = strtolower($ext);
//File extension check
if(in_array($ext,$valid_formats))
{
//File size check
if ($size < (MAX_SIZE*1024))
{
$image_name=time().$filename;
echo "<img src='".$uploaddir.$image_name."' class='imgList'>";
$newname=$uploaddir.$image_name;
//Moving file to uploads folder
if (move_uploaded_file($_FILES['photos']['tmp_name'][$name], $newname))
{
$time=time();
//Insert upload image files names into user_uploads table
mysql_query("INSERT INTO user_uploads(image_name,user_id_fk,created) VALUES('$image_name','$session_id','$time')");
}
else
{
echo '<span class="imgList">You have exceeded the size limit! so moving unsuccessful! </span>'; }
}

else
{
echo '<span class="imgList">You have exceeded the size limit!</span>';
}

}

else
{
echo '<span class="imgList">Unknown extension!</span>';
}

} //foreach end

}
?> 

db.php中

数据库配置文件，只需修改数据库凭据。

<?php
$mysql_hostname = "localhost";
$mysql_user = "username";
$mysql_password = "password";
$mysql_database = "database";
$prefix = "";
$bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Opps some thing went wrong");
mysql_select_db($mysql_database, $bd) or die("Opps some thing went wrong");
?>

CSS

风格图像块。

#preview
{
color:#cc0000;
font-size:12px
}
.imgList
{
max-height:150px;
margin-left:5px;
border:1px solid #dedede;
padding:4px;
float:left;
}

文章来源: Upload Progress when upload multiple files