jQuery Ajaxfile upload
我可以使用下面的jQuery代码使用Ajax请求的post方法执行file upload吗？
$.ajax({ type: "POST", timeout: 50000, url: url, data: dataString, success: function (data) { alert('success'); return false; } }); 如果可能的话，我需要填写“数据”部分吗？ 这是正确的方法吗？ 我只将文件发布到服务器端。
我一直在谷歌search，但我发现是一个插件，而在我的计划，我不想使用它。 至less目前来说。
file upload不可能通过ajax。 您可以上传文件，无需使用IFrame刷新页面。 你可以在这里查看更多细节
更新：
使用XHR2，支持通过AJAX上传文件。 例如通过FormData对象，但不幸的是它并不是所有/旧的浏览器都支持。
FormData支持从以下桌面浏览器版本开始。 IE 10+，Firefox 4.0+，Chrome 7+，Safari 5+，Opera 12+
有关更多详细信息，请参阅MDN链接
通过ajax上传文件不再需要iframe。 我最近自己做了。 看看这些网页：
使用AJAX和jQuery上传HTML5文件
http://dev.w3.org/2006/webapi/FileAPI/#FileReader-interface
更新了答案并进行了清理。 使用getSize函数检查大小或使用getType函数检查types。 增加了进度条html和css代码。
var Upload = function (file) { this.file = file; }; Upload.prototype.getType = function() { return this.file.type; }; Upload.prototype.getSize = function() { return this.file.size; }; Upload.prototype.getName = function() { return this.file.name; }; Upload.prototype.doUpload = function () { var that = this; var formData = new FormData(); // add assoc key values, this will be posts values formData.append("file", this.file, this.getName()); formData.append("upload_file", true); $.ajax({ type: "POST", url: "script", xhr: function () { var myXhr = $.ajaxSettings.xhr(); if (myXhr.upload) { myXhr.upload.addEventListener('progress', that.progressHandling, false); } return myXhr; }, success: function (data) { // your callback here }, error: function (error) { // handle error }, async: true, data: formData, cache: false, contentType: false, processData: false, timeout: 60000 }); }; Upload.prototype.progressHandling = function (event) { var percent = 0; var position = event.loaded || event.position; var total = event.total; var progress_bar_id = "#progress-wrp"; if (event.lengthComputable) { percent = Math.ceil(position / total * 100); } // update progressbars classes so it fits your code $(progress_bar_id + " .progress-bar").css("width", +percent + "%"); $(progress_bar_id + " .status").text(percent + "%"); };
如何使用上传类
//Change id to your id $("#ingredient_file").on("change", function (e) { var file = $(this)[0].files[0]; var upload = new Upload(file); // maby check size or type here with upload.getSize() and upload.getType() // execute upload upload.doUpload(); });
Progressbar html代码
<div id="progress-wrp"> <div class="progress-bar"></div> <div class="status">0%</div> </div>
进度条的CSS代码
#progress-wrp { border: 1px solid #0099CC; padding: 1px; position: relative; height: 30px; border-radius: 3px; margin: 10px; text-align: left; background: #fff; box-shadow: inset 1px 3px 6px rgba(0, 0, 0, 0.12); } #progress-wrp .progress-bar{ height: 100%; border-radius: 3px; background-color: #f39ac7; width: 0; box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.11); } #progress-wrp .status{ top:3px; left:50%; position:absolute; display:inline-block; color: #000000; }
Ajax文章和上传文件是可能的。 我正在使用jQuery $.ajax函数来加载我的文件。 我试图使用XHR对象，但无法在服务器端使用PHP获得结果。
var formData = new FormData(); formData.append('file', $('#file')[0].files[0]); $.ajax({ url : 'upload.php', type : 'POST', data : formData, processData: false, // tell jQuery not to process the data contentType: false, // tell jQuery not to set contentType success : function(data) { console.log(data); alert(data); } });
正如你所看到的，你必须创build一个FormData对象，它是空的或者来自（serialized？ – $('#yourForm').serialize())现有的表单，然后附加input文件。
这里有更多的信息： – 如何使用jQuery.ajax和FormData 上传文件 – 通过jQuery上传文件，提供FormData对象，没有文件名，GET请求
对于PHP过程，你可以使用这样的东西：
//print_r($_FILES); $fileName = $_FILES['file']['name']; $fileType = $_FILES['file']['type']; $fileError = $_FILES['file']['error']; $fileContent = file_get_contents($_FILES['file']['tmp_name']); if($fileError == UPLOAD_ERR_OK){ //Processes your file here }else{ switch($fileError){ case UPLOAD_ERR_INI_SIZE: $message = 'Error al intentar subir un archivo que excede el tamaño permitido.'; break; case UPLOAD_ERR_FORM_SIZE: $message = 'Error al intentar subir un archivo que excede el tamaño permitido.'; break; case UPLOAD_ERR_PARTIAL: $message = 'Error: no terminó la acción de subir el archivo.'; break; case UPLOAD_ERR_NO_FILE: $message = 'Error: ningún archivo fue subido.'; break; case UPLOAD_ERR_NO_TMP_DIR: $message = 'Error: servidor no configurado para carga de archivos.'; break; case UPLOAD_ERR_CANT_WRITE: $message= 'Error: posible falla al grabar el archivo.'; break; case UPLOAD_ERR_EXTENSION: $message = 'Error: carga de archivo no completada.'; break; default: $message = 'Error: carga de archivo no completada.'; break; } echo json_encode(array( 'error' => true, 'message' => $message )); }
我很晚了，但我正在寻找一个基于ajax的图像上传解决scheme，我正在寻找的答案有点分散在整个这个职位。 我解决的解决scheme涉及FormData对象。 我汇集了我放在一起的代码的基本forms。 您可以看到它演示了如何使用fd.append（）将自定义字段添加到窗体，以及如何在ajax请求完成时处理响应数据。
上传html：
<!DOCTYPE html> <html> <head> <title>Image Upload Form</title> <script src="jquery-1.9.1.js"></script> <script type="text/javascript"> function submitForm() { console.log("submit event"); var fd = new FormData(document.getElementById("fileinfo")); fd.append("label", "WEBUPLOAD"); $.ajax({ url: "upload.php", type: "POST", data: fd, processData: false, // tell jQuery not to process the data contentType: false // tell jQuery not to set contentType }).done(function( data ) { console.log("PHP Output:"); console.log( data ); }); return false; } </script> </head> <body> <form method="post" id="fileinfo" name="fileinfo" onsubmit="return submitForm();"> <label>Select a file:</label><br> <input type="file" name="file" required /> <input type="submit" value="Upload" /> </form> <div id="output"></div> </body> </html>
如果你正在使用PHP这里是一种处理上传的方法，包括使用上面的html中演示的两个自定义字段。
upload.php的
<?php if ($_POST["label"]) { $label = $_POST["label"]; } $allowedExts = array("gif", "jpeg", "jpg", "png"); $temp = explode(".", $_FILES["file"]["name"]); $extension = end($temp); if ((($_FILES["file"]["type"] == "image/gif") || ($_FILES["file"]["type"] == "image/jpeg") || ($_FILES["file"]["type"] == "image/jpg") || ($_FILES["file"]["type"] == "image/pjpeg") || ($_FILES["file"]["type"] == "image/x-png") || ($_FILES["file"]["type"] == "image/png")) && ($_FILES["file"]["size"] < 200000) && in_array($extension, $allowedExts)) { if ($_FILES["file"]["error"] > 0) { echo "Return Code: " . $_FILES["file"]["error"] . "<br>"; } else { $filename = $label.$_FILES["file"]["name"]; echo "Upload: " . $_FILES["file"]["name"] . "<br>"; echo "Type: " . $_FILES["file"]["type"] . "<br>"; echo "Size: " . ($_FILES["file"]["size"] / 1024) . " kB<br>"; echo "Temp file: " . $_FILES["file"]["tmp_name"] . "<br>"; if (file_exists("uploads/" . $filename)) { echo $filename . " already exists. "; } else { move_uploaded_file($_FILES["file"]["tmp_name"], "uploads/" . $filename); echo "Stored in: " . "uploads/" . $filename; } } } else { echo "Invalid file"; } ?>
简单的上传表单
<script> //form Submit action $("form").submit(function(evt){ evt.preventDefault(); var formData = new FormData($(this)[0]); $.ajax({ url: 'fileUpload', type: 'POST', data: formData, async: false, cache: false, contentType: false, enctype: 'multipart/form-data', processData: false, success: function (response) { alert(response); } }); return false; }); </script><!--Upload Form--> <form> <table> <tr> <td colspan="2">File Upload</td> </tr> <tr> <th>Select File </th> <td><input id="csv" name="csv" type="file" /></td> </tr> <tr> <td colspan="2"> <input type="submit" value="submit"/> </td> </tr> </table> </form>
XMLHttpRequest（）确实可以实现AJAX上传。 没有iframe必要的。 可以显示上传进度。
有关详细信息，请参阅：回答https://stackoverflow.com/a/4943774/873282来质疑jQuery Upload Progress和AJAXfile upload 。
- 使用隐藏的iframe，并将表单的目标设置为该iframe的名称。 这样，当表单被提交时，只有iframe将被刷新。
- 为iframe的加载事件注册一个事件处理程序来parsing响应。
在我的博客文章的更多细节： http : //blog.manki.in/2011/08/ajax-fie-upload.html 。
如果你想这样做：
$.upload( form.action, new FormData( myForm)) .progress( function( progressEvent, upload) { if( progressEvent.lengthComputable) { var percent = Math.round( progressEvent.loaded * 100 / progressEvent.total) + '%'; if( upload) { console.log( percent + ' uploaded'); } else { console.log( percent + ' downloaded'); } } }) .done( function() { console.log( 'Finished upload'); });
比
https://github.com/lgersman/jquery.orangevolt-ampere/blob/master/src/jquery.upload.js
可能是你的解决scheme。
$("#submit_car").click( function() { var formData = new FormData($('#car_cost_form')[0]); $.ajax({ url: 'car_costs.php', data: formData, async: false, contentType: false, processData: false, cache: false, type: 'POST', success: function(data) { }, }) return false; });
编辑：注意内容types和stream程数据你可以简单地使用这个来通过Ajax上传文件……提交input不能在表单元素之外:)
我已经实现了一个多文件select即时预览和上传后通过ajax从预览中删除不需要的文件。
详细的文档可以在这里find： http : //anasthecoder.blogspot.ae/2014/12/multi-file-select-preview-without.html
演示： http : //jsfiddle.net/anas/6v8Kz/7/embedded/result/
jsFiddle： http : //jsfiddle.net/anas/6v8Kz/7/
使用Javascript：
$(document).ready(function(){ $('form').submit(function(ev){ $('.overlay').show(); $(window).scrollTop(0); return upload_images_selected(ev, ev.target); }) }) function add_new_file_uploader(addBtn) { var currentRow = $(addBtn).parent().parent(); var newRow = $(currentRow).clone(); $(newRow).find('.previewImage, .imagePreviewTable').hide(); $(newRow).find('.removeButton').show(); $(newRow).find('table.imagePreviewTable').find('tr').remove(); $(newRow).find('input.multipleImageFileInput').val(''); $(addBtn).parent().parent().parent().append(newRow); } function remove_file_uploader(removeBtn) { $(removeBtn).parent().parent().remove(); } function show_image_preview(file_selector) { //files selected using current file selector var files = file_selector.files; //Container of image previews var imageContainer = $(file_selector).next('table.imagePreviewTable'); //Number of images selected var number_of_images = files.length; //Build image preview row var imagePreviewRow = $('<tr class="imagePreviewRow_0"><td valign=top style="width: 510px;"></td>' + '<td valign=top><input type="button" value="X" title="Remove Image" class="removeImageButton" imageIndex="0" onclick="remove_selected_image(this)" /></td>' + '</tr> '); //Add image preview row $(imageContainer).html(imagePreviewRow); if (number_of_images > 1) { for (var i =1; i<number_of_images; i++) { /** *Generate class name of the respective image container appending index of selected images, *sothat we can match images selected and the one which is previewed */ var newImagePreviewRow = $(imagePreviewRow).clone().removeClass('imagePreviewRow_0').addClass('imagePreviewRow_'+i); $(newImagePreviewRow).find('input[type="button"]').attr('imageIndex', i); $(imageContainer).append(newImagePreviewRow); } } for (var i = 0; i < files.length; i++) { var file = files[i]; /** * Allow only images */ var imageType = /image.*/; if (!file.type.match(imageType)) { continue; } /** * Create an image dom object dynamically */ var img = document.createElement("img"); /** * Get preview area of the image */ var preview = $(imageContainer).find('tr.imagePreviewRow_'+i).find('td:first'); /** * Append preview of selected image to the corresponding container */ preview.append(img); /** * Set style of appended preview(Can be done via css also) */ preview.find('img').addClass('previewImage').css({'max-width': '500px', 'max-height': '500px'}); /** * Initialize file reader */ var reader = new FileReader(); /** * Onload event of file reader assign target image to the preview */ reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img); /** * Initiate read */ reader.readAsDataURL(file); } /** * Show preview */ $(imageContainer).show(); } function remove_selected_image(close_button) { /** * Remove this image from preview */ var imageIndex = $(close_button).attr('imageindex'); $(close_button).parents('.imagePreviewRow_' + imageIndex).remove(); } function upload_images_selected(event, formObj) { event.preventDefault(); //Get number of images var imageCount = $('.previewImage').length; //Get all multi select inputs var fileInputs = document.querySelectorAll('.multipleImageFileInput'); //Url where the image is to be uploaded var url= "/upload-directory/"; //Get number of inputs var number_of_inputs = $(fileInputs).length; var inputCount = 0; //Iterate through each file selector input $(fileInputs).each(function(index, input){ fileList = input.files; // Create a new FormData object. var formData = new FormData(); //Extra parameters can be added to the form data object formData.append('bulk_upload', '1'); formData.append('username', $('input[name="username"]').val()); //Iterate throug each images selected by each file selector and find if the image is present in the preview for (var i = 0; i < fileList.length; i++) { if ($(input).next('.imagePreviewTable').find('.imagePreviewRow_'+i).length != 0) { var file = fileList[i]; // Check the file type. if (!file.type.match('image.*')) { continue; } // Add the file to the request. formData.append('image_uploader_multiple[' +(inputCount++)+ ']', file, file.name); } } // Set up the request. var xhr = new XMLHttpRequest(); xhr.open('POST', url, true); xhr.onload = function () { if (xhr.status === 200) { var jsonResponse = JSON.parse(xhr.responseText); if (jsonResponse.status == 1) { $(jsonResponse.file_info).each(function(){ //Iterate through response and find data corresponding to each file uploaded var uploaded_file_name = this.original; var saved_file_name = this.target; var file_name_input = '<input type="hidden" class="image_name" name="image_names[]" value="' +saved_file_name+ '" />'; file_info_container.append(file_name_input); imageCount--; }) //Decrement count of inputs to find all images selected by all multi select are uploaded number_of_inputs--; if(number_of_inputs == 0) { //All images selected by each file selector is uploaded //Do necessary acteion post upload $('.overlay').hide(); } } else { if (typeof jsonResponse.error_field_name != 'undefined') { //Do appropriate error action } else { alert(jsonResponse.message); } $('.overlay').hide(); event.preventDefault(); return false; } } else { /*alert('Something went wrong!');*/ $('.overlay').hide(); event.preventDefault(); } }; xhr.send(formData); }) return false; }
是的你可以，只需使用JavaScript来获取文件，确保您读取该文件作为数据的URL。 parsing出base64之前的东西，以实际获得基本的64位编码数据，然后如果你使用PHP或真正的任何后端语言，你可以解码基础64数据并保存到如下所示的文件
Javascript: var reader = new FileReader(); reader.onloadend = function () { dataToBeSent = reader.result.split("base64,")[1]; $.post(url, {data:dataToBeSent}); } reader.readAsDataURL(this.files[0]); PHP: file_put_contents('my.pdf', base64_decode($_POST["data"]));
当然，你可能会想要做一些validation，比如检查你正在处理的文件types和类似的东西，但是这是主意。
您可以使用方法ajaxSubmit如下:)当您select一个文件，需要上传到服务器，forms提交给服务器:)
$(document).ready(function () { var options = { target: '#output', // target element(s) to be updated with server response timeout: 30000, error: function (jqXHR, textStatus) { $('#output').html('have any error'); return false; } }, success: afterSuccess, // post-submit callback resetForm: true // reset the form after successful submit }; $('#idOfInputFile').on('change', function () { $('#idOfForm').ajaxSubmit(options); // always return false to prevent standard browser submit and page navigation return false; }); });
我已经在一个简单的代码中处理了这些。 你可以从这里下载一个工作演示
对于你的情况，这是非常可能的。 我将带你一步一步如何使用AJAX jQuery将file upload到服务器。
首先让我们创build一个HTML文件来添加下面的表单文件元素，如下所示。
<form action="" id="formContent" method="post" enctype="multipart/form-data" > <input type="file" name="file" required id="upload"> <button class="submitI" >Upload Image</button> </form>
其次创build一个jquery.js文件，并添加下面的代码来处理我们提交给服务器的文件
$("#formContent").submit(function(e){ e.preventDefault(); var formdata = new FormData(this); $.ajax({ url: "ajax_upload_image.php", type: "POST", data: formdata, mimeTypes:"multipart/form-data", contentType: false, cache: false, processData: false, success: function(){ alert("file successfully submitted"); },error: function(){ alert("okey"); } }); }); });
你做完了 查看更多
如果你想使用AJAX上传文件，这里是你可以用来上传文件的代码。
$(document).ready(function() { var options = { beforeSubmit: showRequest, success: showResponse, dataType: 'json' }; $('body').delegate('#image','change', function(){ $('#upload').ajaxForm(options).submit(); }); }); function showRequest(formData, jqForm, options) { $("#validation-errors").hide().empty(); $("#output").css('display','none'); return true; } function showResponse(response, statusText, xhr, $form) { if(response.success == false) { var arr = response.errors; $.each(arr, function(index, value) { if (value.length != 0) { $("#validation-errors").append('<div class="alert alert-error"><strong>'+ value +'</strong><div>'); } }); $("#validation-errors").show(); } else { $("#output").html("<img src='"+response.file+"' />"); $("#output").css('display','block'); } }
这里是上传文件的HTML
<form class="form-horizontal" id="upload" enctype="multipart/form-data" method="post" action="upload/image'" autocomplete="off"> <input type="file" name="image" id="image" /> </form>
上传一个由用户提交的文件作为表单的一部分使用jquery请按照下面的代码：
var formData = new FormData(); formData.append("userfile", fileInputElement.files[0]);
然后将表单数据对象发送到服务器。
我们也可以将一个文件或Blob直接附加到FormData对象。
data.append("myfile", myBlob, "filename.txt");
Ajax不支持file upload，您应该使用iframe来代替
这是我想到的一个想法：
Have an iframe on page and have a referencer.
有一个窗体，您将INPUT：File元素移动到。
Form: A processing page AND a target of the FRAME.
结果将发布到框架，然后您可以发送提取的数据到一个级别的图像标签，你想要的东西，像这样：
data:image/png;base64,asdfasdfasdfasdfa
和页面加载。
我相信这对我很有用，而且您可能可以执行如下操作：
.aftersubmit(function(){ stopPropigation()// or some other code which would prevent a refresh. });
要获得所有表单input，包括type =“file”，您需要使用FormData对象 。 您将能够在提交表单后，在debugging器 – >networking – >标题中看到formData内容。
var url = "YOUR_URL"; var form = $('#YOUR_FORM_ID')[0]; var formData = new FormData(form); $.ajax(url, { method: 'post', processData: false, contentType: false, data: formData }).done(function(data){ if (data.success){ alert("Files uploaded"); } else { alert("Error while uploading the files"); } }).fail(function(data){ console.log(data); alert("Error while uploading the files"); });
<html> <head> <title>Ajax file upload</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> $(document).ready(function (e) { $("#uploadimage").on('submit',(function(e) { e.preventDefault(); $.ajax({ url: "upload.php", // Url to which the request is send type: "POST", // Type of request to be send, called as method data: new FormData(this), // Data sent to server, a set of key/value pairs (ie form fields and values) contentType: false, // The content type used when sending data to the server. cache: false, // To unable request pages to be cached processData:false, // To send DOMDocument or non processed data file it is set to false success: function(data) // A function to be called if request succeeds { alert(data); } }); })); </script> </head> <body> <div class="main"> <h1>Ajax Image Upload</h1><br/> <hr> <form id="uploadimage" action="" method="post" enctype="multipart/form-data"> <div id="image_preview"><img id="previewing" src="noimage.png" /></div> <hr id="line"> <div id="selectImage"> <label>Select Your Image</label><br/> <input type="file" name="file" id="file" required /> <input type="submit" value="Upload" class="submit" /> </div> </form> </div> </body> </html>
var dataform = new FormData($("#myform")[0]); //console.log(dataform); $.ajax({ url: 'url', type: 'POST', data: dataform, async: false, success: function (res) { response data; }, cache: false, contentType: false, processData: false });
