我有一个包含图像和文本的表单,所有这些数据都需要插入数据库中。
<form action="processupload.php" method="post" enctype="multipart/form-data" id="UploadForm">
<input name="name" type="text" />
<input name="age" type="text" />
<input name="fileToUpload" type="file" />
<input type="submit" id="SubmitButton" value="Upload" />
</form>
但是我有一个特殊的要求,我希望用户可以填写所有详细信息,但是当他到达上传部分时,我想要一个像这样的 View
哪里
- the user fills the text fields
- selects an image through upload button
- gets a preview of uploaded image (as shown in the figure)
- clicks on start button, the progress bar will start till the time image gets uploaded
- after the above step gets completed, user will click on main submit button and then the entire data should go to the backend
processupload.php的代码
if (count ($_POST) > 1)
{
$name = $_POST['name'];
$target_dir = "uploads/";
$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))
{
// do something
}
}
用于加载程序的脚本在这里 @fidlde 。谁能告诉我如何实现此功能
脚本
$(document).ready(function() {
var progressbox = $('#progressbox');
var progressbar = $('#progressbar');
var statustxt = $('#statustxt');
var submitbutton = $("#SubmitButton");
var myform = $("#UploadForm");
var output = $("#output");
var completed = '0%';
$(myform).ajaxForm({
beforeSend: function() { //brfore sending form
submitbutton.attr('disabled', ''); // disable upload button
statustxt.empty();
progressbox.slideDown(); //show progressbar
progressbar.width(completed); //initial value 0% of progressbar
statustxt.html(completed); //set status text
statustxt.css('color','#000'); //initial color of status text
},
uploadProgress: function(event, position, total, percentComplete) { //on progress
progressbar.width(percentComplete + '%') //update progressbar percent complete
statustxt.html(percentComplete + '%'); //update status text
if(percentComplete>50)
{
statustxt.css('color','#fff'); //change status text to white after 50%
}
},
complete: function(response) { // on complete
output.html(response.responseText); //update element with received data
myform.resetForm(); // reset form
submitbutton.removeAttr('disabled'); //enable submit button
progressbox.slideUp(); // hide progressbar
}
});
});
最佳答案
我希望你明白isset($_POST)
总是返回 true,因为它是超全局的,你不应该以这种方式检查。更明智的做法是检查一下:
if (count ($_POST) > 1)
因为你有两个<inputs />
,这将是检查输入是否已输入的更好选择。点击取消将不会停止上传过程,因为这是发送的单个请求,据我所知。
关于javascript - 通过表单提交图像和文本以及进度条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34286791/