<form enctype="multipart/form-data" action="upload.php" method="POST">
<input name="uploaded" type="file" />
<input type="submit" value="Upload" />
</form>
<?php
if(isset($_REQUEST['submit'])){
$target = "data/".basename( $_FILES['uploaded']['name']) ;
move_uploaded_file($_FILES['uploaded']['tmp_name'], $target);
}
?>
私はJavascript、AJAX、JQueryなどをよく知っており、アップロードの進行状況バーはPHP、AJAX、Javascriptなどを使用して作成できると思います。
アップロードのサイズを取得する方法に驚いています(つまり、毎秒知りたいファイルの量と残りの量を意味します。AJAXなど)アップロード中のファイルが処理中です。
ここにPHPマニュアルへのリンクがありますが、私はそれを理解していませんでした: http://php.net/manual/en/session.upload-progress.php
PHPとAJAXを使用して、PHPの外部拡張機能を使用せずに、アップロードの進行状況バーを表示する他の方法はありますか? php.ini
にアクセスできません
PHP Docは非常に詳細です
アップロードの進行状況は、アップロードが進行中のとき、およびsession.upload_progress.name INI設定がに設定されているとき)と同じ名前の変数をPOSTするときに、$ _SESSIONスーパーグローバルで使用できます。 PHPはそのようなPOSTリクエストを検出し、$ _ SESSIONに配列を入力します。ここで、インデックスはsession.upload_progress.prefixとsessionの連結値です。 .upload_progress.name INIオプション。キーは通常、これらのINI設定、つまり.
必要なすべての情報は、PHPセッションの命名ですべて準備ができています
必要なのは、この情報を抽出してHTMLフォームに表示することだけです。
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
var intval = null;
var percentage = 0 ;
function startMonitor() {
$.getJSON('b.php',
function (data) {
if (data) {
percentage = Math.round((data.bytes_processed / data.content_length) * 100);
$("#progressbar").progressbar({value: percentage});
$('#progress-txt').html('Uploading ' + percentage + '%');
}
if(!data || percentage == 100){
$('#progress-txt').html('Complete');
stopInterval();
}
});
}
function startInterval() {
if (intval == null) {
intval = window.setInterval(function () {startMonitor()}, 200)
} else {
stopInterval()
}
}
function stopInterval() {
if (intval != null) {
window.clearInterval(intval)
intval = null;
$("#progressbar").hide();
$('#progress-txt').html('Complete');
}
}
startInterval();
</script>
session_start();
header('Content-type: application/json');
echo json_encode($_SESSION["upload_progress_upload"]);
PHPセッションのアップロードの進行状況 からより最適化されたバージョンを次に示します。
$('#fileupload').bind('fileuploadsend', function (e, data) {
// This feature is only useful for browsers which rely on the iframe transport:
if (data.dataType.substr(0, 6) === 'iframe') {
// Set PHP's session.upload_progress.name value:
var progressObj = {
name: 'PHP_SESSION_UPLOAD_PROGRESS',
value: (new Date()).getTime() // pseudo unique ID
};
data.formData.Push(progressObj);
// Start the progress polling:
data.context.data('interval', setInterval(function () {
$.get('progress.php', $.param([progressObj]), function (result) {
// Trigger a fileupload progress event,
// using the result as progress data:
e = document.createEvent('Event');
e.initEvent('progress', false, true);
$.extend(e, result);
$('#fileupload').data('fileupload')._onProgress(e, data);
}, 'json');
}, 1000)); // poll every second
}
}).bind('fileuploadalways', function (e, data) {
clearInterval(data.context.data('interval'));
});
$s = $_SESSION['upload_progress_'.intval($_GET['PHP_SESSION_UPLOAD_PROGRESS'])];
$progress = array(
'lengthComputable' => true,
'loaded' => $s['bytes_processed'],
'total' => $s['content_length']
);
echo json_encode($progress);
提案してもいいですか FileDrop 。
私はそれを使ってプログレスバーを作りました、そしてそれはかなり簡単です。
私が遭遇した唯一の欠点は、古いファイルをクリアしていないように見えるため、大量のデータを処理する際のいくつかの問題です。手動で修正できます。
JQueryとして書かれていませんが、とにかくかなりいいです、そして作者は質問にかなり速く答えます。
これは私のコードです正常に動作しています試してみてください:
デモURL
http://codesolution.in/dev/jQuery/file_upload_with_progressbar/
以下のコードを試してください:-
これは私のhtmlコードです
<!doctype html>
<head>
<title>File Upload Progress Demo #1</title>
<style>
body { padding: 30px }
form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px }
.progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
.bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
.percent { position:absolute; display:inline-block; top:3px; left:48%; }
</style>
</head>
<body>
<h1>File Upload Progress Demo #1</h1>
<code><input type="file" name="myfile"></code>
<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="uploadedfile"><br>
<input type="submit" value="Upload File to Server">
</form>
<div class="progress">
<div class="bar"></div >
<div class="percent">0%</div >
</div>
<div id="status"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script>
(function() {
var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');
$('form').ajaxForm({
beforeSend: function() {
status.empty();
var percentVal = '0%';
bar.width(percentVal)
percent.html(percentVal);
},
uploadProgress: function(event, position, total, percentComplete) {
var percentVal = percentComplete + '%';
bar.width(percentVal)
percent.html(percentVal);
},
complete: function(xhr) {
bar.width("100%");
percent.html("100%");
status.html(xhr.responseText);
}
});
})();
</script>
</body>
</html>
私のupload.phpファイルコード
<?php
$target_path = "uploads/";
$target_path = $target_path . basename( $_FILES['uploadedfile']['name']);
if(move_uploaded_file($_FILES['uploadedfile']['tmp_name'], $target_path)) {
echo "The file ". basename( $_FILES['uploadedfile']['name']).
" has been uploaded";
} else{
echo "There was an error uploading the file, please try again!";
}
?>
プログレスバーのコードを書くのは楽しいかもしれませんが、既存の実装を選択してみませんか。 Andrew Valumsは素晴らしいものを書きました、そしてあなたはそれをここで見つけることができます:
私はすべてのプロジェクトでそれを使用していて、それは魅力のように機能します。
XMLHTTPREQUSET2
var xhr = new XMLHttpRequest();
xhr.open('GET', 'video.avi', true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
if (this.status == 200) {
var blob = this.response;
/*
var img = document.createElement('img');
img.onload = function(e) {
window.URL.revokeObjectURL(img.src); // Clean up after yourself.
};
img.src = window.URL.createObjectURL(blob);
document.body.appendChild(img);
/*...*/
}
};
xhr.addEventListener("progress", updateProgress, false);
xhr.send();
function updateProgress (oEvent) {
if (oEvent.lengthComputable) {
var percentComplete = oEvent.loaded / oEvent.total;
console.log(percentComplete)
} else {
// Unable to compute progress information since the total size is unknown
}
}
まず、マシンにPHP 5.4がインストールされていることを確認します。タグを付けていません php-5.4 なので、わかりません。echo phpversion();
を呼び出して確認してください。 (またはコマンドラインからphp -v
)。
とにかく、あなたが正しいバージョンを持っていると仮定すると、あなたはphp.ini
ファイルに正しい値を設定できなければなりません。あなたはそれができないとあなたが言うので、それをする方法についての説明を始める価値はありません。
フォールバックソリューションとして、Flashオブジェクトアップローダーを使用します。