[英]Display progress bar while the php script is running through ajax
我有一个表单,通过ajax向服务器提交值。
<form>
<input id="titlee" name="titlee">
<input type="file" name="fileToUpload" id="fileToUpload">
<button type="submit" value="submit" id="submit" name="submit">Start</button>
<div class="progress"></div>
</form>
脚本
<script type="text/javascript">
$(function()
{
$("#submit").click(function()
{
var titlee = $("#titlee").val();
var fileToUpload= $("#fileToUpload").val();
var dataString = 'titlee='+ titlee + '&fileToUpload=' + fileToUpload;
$.ajax(
{
type: "POST",
url: "c_insert_test.php",
data: dataString,
success: function()
});
return false;
});
});
</script>
c_insert_test.php
<?php
$titlee = $_POST['titlee'];
$target_dir = "reqdoc/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);
$new_filename = $target_dir . uniqid() . '.' . $imageFileType;
if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $new_filename))
{
$filee = $new_filename;
// insert query to insert the image path and other parameters in the table
}
else
{
echo "false";
}
?>
对于进度条,我在这个jsfiddle有代码
我希望在参数和图像通过表单上传到服务器时显示进度条。 但是我无法将进度条与ajax合并,任何人都可以告诉我如何合并这两个代码以便我可以显示进度条并将图像上传到服务器文件夹
我将按照最简单的方式获取JQuery ajax请求的进度给你一个方法?
JQuery的
$(function()
{
$("#submit").click(function()
{
var titlee = $("#titlee").val();
var wtag = $("#wtag").val();
var dataString = 'titlee='+ titlee + '&wtag=' + wtag ;
$.ajax({
xhr: function () {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function (evt) {
if (evt.lengthComputable) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
console.log(percentComplete);
$('.progress').css({
width: percentComplete * 100 + '%'
});
if (percentComplete === 1) {
$('.progress').addClass('hide');
}
}
}
}, false);
xhr.addEventListener("progress", function (evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
console.log(percentComplete);
$('.progress').css({
width: percentComplete * 100 + '%'
});
}
}, false);
return xhr;
},
type: 'POST',
url: "c_insert_test.php",
data: dataString,
success: function (data) {
//Do something on success
}
});
return false;
});
});
CSS
.progress {
display: block;
text-align: center;
width: 0;
height: 3px;
background: red;
transition: width .3s;
}
.progress.hide {
opacity: 0;
transition: opacity 1.3s;
}
这可以是一个适当的解决方案来做到这一点。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.