ajaxとphpを使用して画像ファイルをアップロードしています。
これがコードです、
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<form action="fileup.php" method="post" enctype="multipart/form-data">
<input type="file" id="fileup" name="file" accept="image/*" style="position:relative; left:-105px; top:30px; opacity:0; z-index:10; cursor:pointer;" >
</form>
<div class="progress">
<div class="bar"></div >
<div class="percent">0%</div >
</div>
<div id="status" style = "position:relative; top:-20px; left:150px;"></div>
アヤックス:
$jq(function() {
var bar = $jq('.bar');
var percent = $jq('.percent');
var status = $jq('#status');
$jq('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);
status.html("Uploading...");
},
complete: function(xhr) {
bar.width("100%");
percent.html("100%");
status.html("Upload complete");
isrc = xhr.responseText;
handleFiles(files);
}
});
$jq("#fileup").change(function () {
files = this.files;
$jq('form').submit();
});
});
PHPコード、
<?php
$target_path = "uploaded_images/";
$file_name = $_FILES["file"]["name"];
$random_digit=rand(0000,9999);
$new_file_name=$random_digit.$file_name;
$target_path = $target_path . basename( $new_file_name);
if(move_uploaded_file($_FILES['file']['tmp_name'], $target_path)) {
echo basename( $new_file_name);
} else{
echo "There was an error uploading the file, please try again!";
}
?>
正常に動作しており、ChromeとFirefoxの進捗状況を示しています。しかし、つまり、アップロードの進行状況には入りません。そこにアラートを入れても、ieに表示されません。