我的目标是拥有一个可以将多个文件上传到我的网络服务器的网站。 这是我的 HTML 表单:
<form class='form-horizontal'>
<div class='form-group text-center'>
<h3>Upload</h3>
</div>
<div class='form-group'>
<label for='file' class='col-sm-3 control-label'>File(s)</label>
<div class='col-sm-9'>
<input type="file" id='files' class="form-control text-center" multiple />
</div>
<div class='col-sm-12'>
<br>
<button type="button" id='submit' class="btn btn-success center-block glyphicon glyphicon-cloud-upload btn-lg" value='Upload' />
</div>
</div>
</form>
然后这是我的 JavaScript:
$(document).ready(function(){
var files = [];
$("#files").bind('change', function() {
files = this.files
});
$("#submit").click(function(){
//Validate first
if(files.length > 0){
var data = {
files: files
};
$.ajax({
type: "POST",
url: "<?php echo BASE_URL; ?>/FileUploader/php/uploadFiles.php",
data: data,
success: function(response){
console.log(response);
//$("#files").val("");
}
});
}
});
});
当我发送 ajax 请求时，我在控制台中收到错误:jquery.min.js 文件中的“Uncaught TypeError:非法调用”
有人知道如何解决这个问题吗？
最佳答案
去年夏天我使用 PHP、Javascript 和 AJAX 从头开始完成这个工作。它将适用于图像、音频、视频、txt 文件。 要查看完整代码，请转至 https://github.com/akshaynagpal/multi_type_upload
HTML
<body>
<h1>Media Upload</h1>
<form name="upload_form" id="upload_form" method="POST" enctype="multipart/form-data">
Select Image: <input type="file" id="uploadimage" name="uploadimage" /><br />
<input type="button" value="Upload Image" name="uploadButton" onclick="showProgressBar();"/>Format allowed:"jpg" "gif", "png" only.<br />
<div id="progressDiv" style="display:none">
<progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
</div>
<h3 id="status"></h3>
<p id="loaded_n_total"></p>
Select Video: <input type="file" id="uploadvideo" name="upload_video" /><br />
<input type="button" value="Upload Video" name="uploadButton" onclick="showProgressBar2();"/>Format allowed:"mp4" only.<br />
<div id="progressDiv2" style="display:none">
<progress id="progressBar2" name="progressbar2" value="0" max="100" style="width:300px;"></progress>
</div>
<h3 id="status2"></h3>
<p id="loaded_n_total2"></p>
</form>
</body>
PHP
$fileName = $_FILES["uploadimage"]["name"]; // The file name
$fileTmpLoc = $_FILES["uploadimage"]["tmp_name"]; // File in the PHP tmp folder
$fileType = $_FILES["uploadimage"]["type"]; // The type of file it is
$fileSize = $_FILES["uploadimage"]["size"]; // File size in bytes
$fileErrorMsg = $_FILES["uploadimage"]["error"]; // 0 for false... and 1 for true
PHP 和 Javascript 代码有点长，因此您可以访问上面的 github 链接来阅读它们。
关于javascript - 我在用 PHP 制作多文件 uploader 时遇到一些麻烦，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26264900/