我可以使用以下jQuery代码使用ajax请求的POST方法执行文件上载吗?
$.ajax({
type: "POST",
timeout: 50000,
url: url,
data: dataString,
success: function (data) {
alert('success');
return false;
}
});
如果可能,我需要填写数据部分吗?这是正确的方式吗?我只将文件POST到服务器端。
我一直在搜索,但我发现的是一个插件,而在我的计划中,我不想使用它。至少目前是这样。
如果你想使用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>
可以,只需使用javascript获取文件,确保将文件作为数据URL读取。解析出base64之前的内容,以实际获得base64编码的数据,然后如果您使用php或任何后端语言,您可以解码base64数据并保存到如下所示的文件中
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"]));
当然,你可能会想做一些验证,比如检查你正在处理的文件类型之类的事情,但这是一个想法。
<input class="form-control cu-b-border" type="file" id="formFile">
<img id="myImg" src="#">
在js中
<script>
var formData = new FormData();
formData.append('file', $('#formFile')[0].files[0]);
$.ajax({
type: "POST",
url: '/GetData/UploadImage',
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);
$('#myImg').attr('src', data);
},
error: function (xhr, ajaxOptions, thrownError) {
}
})
</script>
在控制器中
public ActionResult UploadImage(HttpPostedFileBase file)
{
string filePath = "";
if (file != null)
{
string path = "/uploads/Temp/";
if (!Directory.Exists(Server.MapPath("~" + path)))
{
Directory.CreateDirectory(Server.MapPath("~" + path));
}
filePath = FileUpload.SaveUploadedFile(file, path);
}
return Json(filePath, JsonRequestBehavior.AllowGet);
}
我用简单的代码处理了这些问题。您可以从这里下载工作演示
就你的情况而言,这些都是可能的。我将逐步介绍如何使用AJAX jquery将文件上传到服务器。
首先让我们创建一个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>
其次,创建一个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");
}
});
});
});
你完成了。查看更多信息