上传进度，当上传多个文件 [英] Upload Progress when upload multiple files
问题描述
我要上传多文件（超过1000个文件，总2GB以上）。 在PHP中，我使用功能
I want to upload multi-file (more than 1000 files, with total more than 2GB). In PHP, i use function
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％，这阿贾克斯URL仍然运行。
I found out that, when use move_upload_file , it didn't upload right now. It only keep in waiting stack. When this function run completedly, then it move file to server. So, when i use upload process, it gain 100% , this ajax url still run.
$("#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％，所有上传到服务器上的文件。 我怎么能呢？ 感谢先进的。
Now, i want to when upload progress gain 100%, all of files uploaded to server. How do i can that? Thank in advanced.
推荐答案
您好：您可以按照下面的方法来完成它。
Hello You can follow the below approach to get it done.
我已经尽我所能，让这个例子尽可能的简单。
I have try my best to make the example as simple as possible.
您需要实现这种方法在code达到的结果。
You need to implement this approach in your code to reach the result.
下面code的工作和测试。
用户
包含用户详细信息用户名，密码，电子邮件，profile_image和profile_image_small等。
Contains user details username, password, email, profile_image and profile_image_small etc.
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（外键）和时间戳等。
Contains user upload details upload_id, image_name, user_id_fk(foreign key) and timestamp etc.
CREATE TABLE `user_uploads` (
`upload_id` int(11) AUTO_INCREMENT PRIMARY KEY,
`image_name` text,
`user_id_fk` int(11),
`created` int(11)
)
的Javascript code
$（＃photoimg）生活（'改变'，函数（）{}） - photoimg是输入文件标签的ID名称和$（'＃imageform）当作ajaxForm（） - imageform是ID FORM的名字。虽然改变了输入它要求提交表单，而无需使用当作ajaxForm（）方法提神页面。上传的图片将$＃内preVIEW标签p $ PPEND。
$("#photoimg").live('change',function(){})- photoimg is the ID name of INPUT FILE tag and $('#imageform').ajaxForm() - imageform is the ID name of FORM. While changing INPUT it calls FORM submit without refreshing page using ajaxForm() method. Uploaded images will prepend inside #preview tag.
<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基于表单上传提交状态。
Here hiding and showing #imageloadstatus and #imageloadbutton based on form upload submit status.
的index.php
包含简单的PHP和HTML code。在这里，$ SESSION_ID = 1表示的用户id会话值。
Contains simple PHP and HTML code. Here $session_id=1 means user id session value.
<?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 code。该脚本可以帮助你上传图片到上传文件夹，这将重新命名的图像文件转换成时间戳+ session_id.extention格式，以避免重复。该系统将图像文件保存到user_uploads与用户的会话ID表
Contains PHP code. This script helps you to upload images into uploads folder and it will rename image file into timestamp+session_id.extention format to avoid duplicates. This system will store image files into user_uploads with user session id tables
<?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中
数据库配置文件，只需修改数据库的凭据。
Database configuration file, just modify database credentials.
<?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;
}
这篇关于上传进度，当上传多个文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
