2014-11-11 5 views
1

Я хочу загрузить многофайлы (более 1000 файлов с общим объемом более 2 ГБ). В 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, это не закачивать прямо сейчас. Он остается в ожидании стека. Когда эта функция запускается полностью, она перемещает файл на сервер. Итак, когда я использую процесс загрузки, он набирает 100%, этот URL-адрес 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) { 

        }*/ 

       }); 

enter image description here

Теперь я хочу, когда прогресс загрузки получить 100%, все файлы, загруженные на сервер. Как это сделать? Спасибо в продвинутом режиме.

ответ

0

попробовать это может работать ..

\t //attach 
 
\t function sendFileToServer(formData, status, file) { 
 
\t var uploadURL = "index.php?p=ticket-attach&ajax=1"; //Upload URL 
 
\t var extraData = {}; //Extra Data. 
 
\t var jqXHR = $.ajax({ 
 
\t  xhr: function() { 
 
\t  var xhrobj = $.ajaxSettings.xhr(); 
 
\t  if (xhrobj.upload) { 
 
\t   xhrobj.upload.addEventListener('progress', function(event) { 
 
\t   var percent = 0; 
 
\t   var position = event.loaded || event.position; 
 
\t   var total = event.total; 
 
\t   if (event.lengthComputable) { 
 
\t    percent = Math.ceil(position/total * 100); 
 
\t   } 
 
\t   //Set progress 
 
\t   status.setProgress(percent); 
 
\t   }, false); 
 
\t  } 
 
\t  return xhrobj; 
 
\t  }, 
 
\t  url: uploadURL, 
 
\t  type: "POST", 
 
\t  contentType: false, 
 
\t  processData: false, 
 
\t  cache: false, 
 
\t  data: formData, 
 
\t  dataType: "json", 
 
\t  success: function(data) { 
 
\t  if (data['error'] == "") { 
 
\t   status.setProgress(100); 
 
\t   status.setFileNameSize(data['fname'].split(",")[0], file.size); 
 
\t   status.appendFN(data['fname']); 
 
\t   //var namef= ; 
 
\t  } else { 
 
\t   //alert(data['error']); 
 
\t   status.errorMsg(); 
 
\t  } 
 
\t  } 
 
\t }); 
 
\t status.setAbort(jqXHR); 
 
\t } 
 

 
\t function createStatusbar(obj) { 
 
\t this.statusbar = $("<div class='statusbar' id=''></div>"); 
 
\t this.filename = $("<div class='filename'></div>").appendTo(this.statusbar); 
 
\t this.size = $("<div class='filesize'></div>").appendTo(this.statusbar); 
 
\t this.abort = $("<div class='abort'>&times;</div>").appendTo(this.statusbar); 
 
\t this.progressBar = $("<div class='progressBar'><div></div></div>").appendTo(this.statusbar); 
 
\t obj.append(this.statusbar); 
 
\t this.setFileNameSize = function(name, size) { 
 
\t  var sizeStr = ""; 
 
\t  var sizeKB = size/1024; 
 
\t  if (parseInt(sizeKB) > 1024) { 
 
\t  var sizeMB = sizeKB/1024; 
 
\t  sizeStr = sizeMB.toFixed(2) + " MB"; 
 
\t  } else { 
 
\t  sizeStr = sizeKB.toFixed(2) + " KB"; 
 
\t  } 
 
\t  this.filename.html(name); 
 
\t  this.size.html("(" + sizeStr + ")"); 
 
\t  this.statusbar.attr("sizev", size); 
 
\t  $("#attach_size").attr("sizev", parseInt($("#attach_size").attr("sizev")) + size); 
 
\t  this.setTotalSize(); 
 
\t } 
 
\t this.setTotalSize = function() { 
 
\t  //set total size 
 
\t  var size = parseInt($("#attach_size").attr("sizev")); 
 

 
\t  var sizeStr = ""; 
 
\t  var sizeKB = size/1024; 
 
\t  if (parseInt(sizeKB) > 1024) { 
 
\t  var sizeMB = sizeKB/1024; 
 
\t  sizeStr = sizeMB.toFixed(2) + " MB"; 
 
\t  } else { 
 
\t  sizeStr = sizeKB.toFixed(2) + " KB"; 
 
\t  } 
 
\t  if (sizeStr != "" && size > 0) $("#attach_size").html("(" + sizeStr + ")"); 
 
\t  else $("#attach_size").html(""); 
 
\t } 
 
\t this.setProgress = function(progress) { 
 

 
\t  var progressBarWidth = progress * this.progressBar.width()/100; 
 
\t  this.progressBar.find('div').animate({ 
 
\t  width: progressBarWidth 
 
\t  }, 10).html(progress + "%"); 
 
\t  if (parseInt(progress) >= 100) { 
 
\t  this.progressBar.hide(); 
 
\t  if ($.isFunction(tinymce.get)) tinymce.get('mail_body').isNotDirty = 0; 
 
\t  $("#save_status").html("Not saved"); 
 

 
\t  //this.abort.hide(); 
 
\t  } else { 
 
\t  if ($.isFunction(tinymce.get)) tinymce.get('mail_body').isNotDirty = 1; 
 
\t  $("#save_status").html("Not saved"); 
 
\t  } 
 
\t } 
 
\t this.setAbortFD = function() { 
 
\t  var sb = this.statusbar; 
 
\t  var ts = this; 
 
\t  this.abort.click(function() { 
 
\t  $.ajax({ 
 
\t   type: "POST", 
 
\t   url: "index.php?p=ticket-dattach&ajax=1", 
 
\t   data: "fname=" + sb.children(".filename").children("input").val(), 
 
\t   //dataType: "json", 
 
\t   success: function(data) { 
 
\t   tinymce.get('mail_body').isNotDirty = 0; 
 
\t   $("#save_status").html("Not saved"); 
 
\t   }, 
 
\t   error: function() { 
 
\t   alert('File is not deleted'); 
 
\t   } 
 
\t  }); 
 
\t  //alert(sb.children(".filename").children("input").val()); 
 
\t  $("#attach_size").attr("sizev", (parseInt($("#attach_size").attr("sizev")) - parseInt(sb.attr("sizev")))); 
 
\t  sb.remove(); 
 
\t  ts.setTotalSize(); 
 
\t  }); 
 
\t } 
 
\t this.setAbort = function(jqxhr) { 
 
\t  var sb = this.statusbar; 
 
\t  var ts = this; 
 
\t  this.abort.click(function() { 
 
\t  jqxhr.abort(); 
 
\t  if (sb.children(".progressBar").children("div").html() == "100%") { 
 
\t   $.ajax({ 
 
\t   type: "POST", 
 
\t   url: "index.php?p=ticket-dattach&ajax=1", 
 
\t   data: "fname=" + sb.children(".filename").children("input").val(), 
 
\t   //dataType: "json", 
 
\t   success: function(data) { 
 
\t    tinymce.get('mail_body').isNotDirty = 0; 
 
\t    $("#save_status").html("Not saved"); 
 
\t   }, 
 
\t   error: function() { 
 
\t    alert('File is not deleted'); 
 
\t   } 
 
\t   }); 
 
\t   $("#attach_size").attr("sizev", (parseInt($("#attach_size").attr("sizev")) - parseInt(sb.attr("sizev")))); 
 
\t   sb.remove(); 
 
\t  } else { 
 
\t   sb.remove(); 
 
\t  } 
 
\t  ts.setTotalSize(); 
 
\t  }); 
 
\t } 
 
\t this.appendFN = function(fn) { 
 
\t  this.filename.append("<input type=\"hidden\" name=\"ticket_attach[]\" value=\"" + fn + "\" />"); 
 
\t } 
 
\t this.errorMsg = function() { 
 
\t  var sb = this.statusbar; 
 
\t  sb.children(".progressBar").children("div").html("File Error"); 
 
\t  sb.children(".progressBar").show(); 
 
\t  sb.children(".filename").children("input").remove() 
 
\t } 
 
\t } 
 

 
\t function toggle_class(clas) { 
 
\t $("." + clas).toggle(); 
 
\t } 
 

 
\t function insert_attach(input) { 
 
\t var files = input.files; 
 
\t $.each(files, function(idx, file) { 
 
\t  var fd = new FormData(); 
 
\t  fd.append('ticket_attach', file); 
 
\t  var obj = $(".note-attachbox"); 
 
\t  var status = new createStatusbar(obj); //Using this we can set progress. 
 
\t  status.setFileNameSize(file.name, file.size); 
 
\t  sendFileToServer(fd, status, file); 
 
\t }); 
 
\t $("#afile_browser").val(""); 
 
\t }
.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>

+0

Спасибо. Этот результат не должен быть моей потребностью. –

0

Привет Вы можете следовать ниже подход, чтобы сделать это.

Я стараюсь изо всех сил сделать пример максимально простым.

Вам необходимо реализовать этот подход в своем коде, чтобы достичь результата.

Приведенный ниже код работает и проверен.

Пользователи

Содержит сведения пользователя имя пользователя, пароль, адрес электронной почты, 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, имя_образа, 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 это имя ID входного файла тега и $ ('# imageform') .ajaxForm() - imageform - это идентификационное имя FORM. При изменении INPUT он вызывает FORM submit без обновления страницы с использованием метода 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 означает значение сеанса идентификатора пользователя.

<?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 код. Этот скрипт позволяет загружать изображения в папку uploads и переименовывать файл изображения в формат timestamp + session_id.extention, чтобы избежать дублирования. Эта система будет хранить файлы изображений в 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; 
} 
+0

У этого нет прогресса загрузки. Загружая, я могу это сделать. Я хочу, чтобы при загрузке precent получалось 100%, все файлы были на сервере. В настоящее время, когда precent набирает 100%, он начинает перемещать файлы на сервер. –

Смежные вопросы