这可能看起来像重复的，但我还没有找到完全符合我的需求的东西。我想通过在文件浏览器中选择一个文件来将图像上传到文件夹，不使用提交按钮（到目前为止一切顺利，我可以做到这一点）。但我希望用户不要被重定向到
upload.phpPHP,AJAX & JavascriptJQuery plugin而且我会有几个表格，所以我不使用 ID 标签
到目前为止，我的代码不能 100% 工作，只有当我上传并重定向到
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");
}
});
});
上传.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.";
}
}?>
您可以使用以下方法，无需点击按钮和刷新页面文件上传。
<form id="uploadform" target="upiframe" action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="fileToUpload" class="test" onchange="yourFunction()">
</form>
<iframe id="upiframe" name="upiframe" witdh="0px" height="0px" border="0" style="width:0; height:0; border:none;"></iframe>
function yourFunction() {
var form = document.getElementById('uploadform');
form.submit();
});
}
我建议您使用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);
});
}
});
});
});