上载img而不使用提交按钮或PHP&中的重新编写AJAX [英] Upload img without using submit button or rederict in PHP & AJAX
问题描述
这看起来像重复的，但是我还没有找到完全符合我的需求的东西.我想通过在文件浏览器中选择一个文件来将图像上传到文件夹，不使用提交按钮(到目前为止，我可以做到这一点).但是，然后我希望用户不要被重定向到upload.php文件.
因此，我需要在不使用提交"按钮的情况下提交文件，并且不能将用户重定向到另一个页面.刷新是可以的，但最好也不要刷新.
这就是我现在所拥有的，我的问题是这是否可以在PHP,AJAX & Javascript中完成，或者我是否应该去JQuery plugin?
我将有几种形式，所以我不使用ID标签
到目前为止，仅当我上传并重定向到upload.php时，我的代码才能100％正常工作:
<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="fileToUpload" class="test">
</form>
$(".test").change(function() {
$.ajax({
url: "upload.php",
type: "post",
dataType: 'json',
processData: false,
contentType: false,
data('file', $(this[0].files[0])),
success: function(text) {
alert("successfully");
}
});
});
UPLOAD.PHP
<?php if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], "uploads/myfile.jpg")) {
echo "The file ". basename( $_FILES["fileToUpload"]["name"]). " has been uploaded.";
} else {
echo "Sorry, there was an error uploading your file.";
}
}?>
我建议您使用 jQuery -File-Upload ，因为它可以处理浏览器版本和操作系统兼容性问题.如果您不需要任何高级内容，请阅读此文档
上述链接中的代码
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery File Upload Example</title>
</head>
<body>
<input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>
<script>
$(function () {
$('#fileupload').fileupload({
dataType: 'json',
done: function (e, data) {
$.each(data.result.files, function (index, file) {
$('<p/>').text(file.name).appendTo(document.body);
});
}
});
});
</script>
</body>
</html>
根据OP评论进行了
$(function () {
$('.fileuploads').each(function(i, obj){
$(obj).fileupload({
dataType: 'json',
done: function (e, data) {
$.each(data.result.files, function (index, file) {
$('<p/>').text(file.name).appendTo(document.body);
});
}
});
});
});
This might look like a duplicate but I have not found something that matches my needs exactly yet. I want to upload an Image to a folder by just choosing a file in the file browser, no submit button used (so far so good, i can do this). But then I want the user not be redirected the to upload.php file.
So I need to submit a file without a using submit button and not redirecting the user to another page. A refresh is ok but preferable without refresh as well..
This is what i have right now, and my question is if this could be done in PHP,AJAX & Javascript or if i should go for a JQuery plugin?
AND I will have several forms so i am not using ID-tag
My code so far doesn't work 100%, only when i upload and redirect to upload.php :
<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="fileToUpload" class="test">
</form>
$(".test").change(function() {
$.ajax({
url: "upload.php",
type: "post",
dataType: 'json',
processData: false,
contentType: false,
data('file', $(this[0].files[0])),
success: function(text) {
alert("successfully");
}
});
});
UPLOAD.PHP
<?php if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], "uploads/myfile.jpg")) {
echo "The file ". basename( $_FILES["fileToUpload"]["name"]). " has been uploaded.";
} else {
echo "Sorry, there was an error uploading your file.";
}
}?>
I suggest you to use jQuery-File-Upload because it takes care of browser versions and operating systems compatibility issues. If you don't need anything advanced read this documentation
Code from the above link
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery File Upload Example</title>
</head>
<body>
<input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>
<script>
$(function () {
$('#fileupload').fileupload({
dataType: 'json',
done: function (e, data) {
$.each(data.result.files, function (index, file) {
$('<p/>').text(file.name).appendTo(document.body);
});
}
});
});
</script>
</body>
</html>
Edited based on OP comment:
$(function () {
$('.fileuploads').each(function(i, obj){
$(obj).fileupload({
dataType: 'json',
done: function (e, data) {
$.each(data.result.files, function (index, file) {
$('<p/>').text(file.name).appendTo(document.body);
});
}
});
});
});
这篇关于上载img而不使用提交按钮或PHP&中的重新编写AJAX的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
