没有窗体的file upload
不使用任何forms，我可以使用jQuery的POST方法发送文件/文件从<input type="file">到“upload.php”。 input标签不在任何表单标签内。 它单独站立。 所以我不想使用像“ajaxForm”或“ajaxSubmit”这样的jQuery插件。
您可以使用FormData通过POST请求提交您的数据。 这是一个简单的例子：
var myFormData = new FormData(); myFormData.append('pictureFile', pictureInput.files[0]); $.ajax({ url: 'upload.php', type: 'POST', processData: false, // important contentType: false, // important dataType : 'json', data: myFormData });
只要您知道您的请求设置（如url，方法和参数数据），您就不必使用表单进行ajax请求。
基于这个教程 ，这里有一个非常基本的方法来做到这一点：
$('your_trigger_element_selector').on('click', function(){ var data = new FormData(); data.append('input_file_name', $('your_file_input_selector').prop('files')[0]); // append other variables to data if you want: data.append('field_name_x', field_value_x); $.ajax({ type: 'POST', processData: false, // important contentType: false, // important data: data, url: your_ajax_path, dataType : 'json', // in PHP you can call and process file in the same way as if it was submitted from a form: // $_FILES['input_file_name'] success: function(jsonData){ ... } ... }); });
不要忘记添加适当的error handling
这里的所有答案仍然使用FormData API 。 这就像一个没有表格的表单file upload。 您也可以使用xmlHttpRequest直接上传文件作为POST请求正文内的内容，如下所示：
var xmlHttpRequest = new XMLHttpRequest(); var file = ...file handle... var fileName = ...file name... var target = ...target... var mimeType = ...mime type... xmlHttpRequest.open('POST', target, true); xmlHttpRequest.setRequestHeader('Content-Type', mimeType); xmlHttpRequest.setRequestHeader('Content-Disposition', 'attachment; filename="' + fileName + '"'); xmlHttpRequest.send(file);
Content-Type和Content-Disposition标题用于解释我们发送的内容（MIMEtypes和文件名）。
我也在这里发布了类似的答案。
第1步：创build放置HTML代码的HTML页面。
第2步：在HTML代码页底部（页脚）创buildJavascript：并将Jquery代码放在Script标签中。
第3步：创buildPHP文件和PHP代码复制过去。 之后在$.ajax Code代码url申请哪一个关于你的php文件名。
JS
//$(document).on("change", "#avatar", function() { // If you want to upload without a submit button $(document).on("click", "#upload", function() { var file_data = $("#avatar").prop("files")[0]; // Getting the properties of file from file field var form_data = new FormData(); // Creating object of FormData class form_data.append("file", file_data) // Appending parameter named file with properties of file_field to form_data form_data.append("user_id", 123) // Adding extra parameters to form_data $.ajax({ url: "/upload_avatar", // Upload Script dataType: 'script', cache: false, contentType: false, processData: false, data: form_data, // Setting the data attribute of ajax with file_data type: 'post', success: function(data) { // Do something after Ajax completes } }); });
HTML
<input id="avatar" type="file" name="avatar" /> <button id="upload" value="Upload" />
腓
print_r($_FILES); print_r($_POST);
对不起， 这个人，但AngularJS提供了一个简单而优雅的解决scheme。
这是我使用的代码：
ngApp.controller('ngController', ['$upload', function($upload) { $scope.Upload = function($files, index) { for (var i = 0; i < $files.length; i++) { var file = $files[i]; $scope.upload = $upload.upload({ file: file, url: '/File/Upload', data: { id: 1 //some data you want to send along with the file, name: 'ABC' //some data you want to send along with the file, }, }).progress(function(evt) { }).success(function(data, status, headers, config) { alert('Upload done'); } }) .error(function(message) { alert('Upload failed'); }); } }; }]);
.Hidden { display: none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div data-ng-controller="ngController"> <input type="button" value="Browse" onclick="$(this).next().click();" /> <input type="file" ng-file-select="Upload($files, 1)" class="Hidden" /> </div>
试试这个puglin simpleUpload ，不需要表单
HTML：
<input type="file" name="arquivo" id="simpleUpload" multiple > <button type="button" id="enviar">Enviar</button>
使用Javascript：
$('#simpleUpload').simpleUpload({ url: 'upload.php', trigger: '#enviar', success: function(data){ alert('Envio com sucesso'); } });
