我想用jQuery异步上传文件。
$（文档）.ready（函数（）{$（“#uploadbutton”）.click（函数（）{var filename=$（“#file”）.val（）；$.ajax美元({类型：“POST”，url:“addFile.do”，enctype:'多部分/表单数据'，数据：{文件：文件名},成功：函数（）{alert（“上传的数据：”）；}});});});<script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js“></script><span>文件</span><input type=“file”id=“file”name=“file”size=“10”/><input id=“uploadbutton”type=“button”value=“Upload”/>
我只得到文件名，而不是上传文件。我可以做什么来解决这个问题？
当前回答
在此处查找“异步处理文件的上载过程”：https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications
链接中的示例
<?php
if (isset($_FILES['myFile'])) {
// Example:
move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']);
exit;
}
?><!DOCTYPE html>
<html>
<head>
<title>dnd binary upload</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function sendFile(file) {
var uri = "/index.php";
var xhr = new XMLHttpRequest();
var fd = new FormData();
xhr.open("POST", uri, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// Handle response.
alert(xhr.responseText); // handle response.
}
};
fd.append('myFile', file);
// Initiate a multipart/form-data upload
xhr.send(fd);
}
window.onload = function() {
var dropzone = document.getElementById("dropzone");
dropzone.ondragover = dropzone.ondragenter = function(event) {
event.stopPropagation();
event.preventDefault();
}
dropzone.ondrop = function(event) {
event.stopPropagation();
event.preventDefault();
var filesArray = event.dataTransfer.files;
for (var i=0; i<filesArray.length; i++) {
sendFile(filesArray[i]);
}
}
}
</script>
</head>
<body>
<div>
<div id="dropzone" style="margin:30px; width:500px; height:300px; border:1px dotted grey;">Drag & drop your file here...</div>
</div>
</body>
</html>
其他回答
jQueryUploadify是我以前用来上传文件的另一个好插件。JavaScript代码如下所示：code。但是，新版本在Internet Explorer中不起作用。
$('#file_upload').uploadify({
'swf': '/public/js/uploadify.swf',
'uploader': '/Upload.ashx?formGuid=' + $('#formGuid').val(),
'cancelImg': '/public/images/uploadify-cancel.png',
'multi': true,
'onQueueComplete': function (queueData) {
// ...
},
'onUploadStart': function (file) {
// ...
}
});
我做了大量的搜索，我找到了另一种不用任何插件、只使用ajax上传文件的解决方案。解决方案如下：
$(document).ready(function () {
$('#btn_Upload').live('click', AjaxFileUpload);
});
function AjaxFileUpload() {
var fileInput = document.getElementById("#Uploader");
var file = fileInput.files[0];
var fd = new FormData();
fd.append("files", file);
var xhr = new XMLHttpRequest();
xhr.open("POST", 'Uploader.ashx');
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
alert('success');
}
else if (uploadResult == 'success')
alert('error');
};
xhr.send(fd);
}
使用|HTML5的readAsDataURL（）或一些base64编码器将文件转换为base64。在这里摆弄
var reader = new FileReader();
reader.onload = function(readerEvt) {
var binaryString = readerEvt.target.result;
document.getElementById("base64textarea").value = btoa(binaryString);
};
reader.readAsBinaryString(file);
然后检索：
window.open("data:application/octet-stream;base64," + base64);
Try
异步函数saveFile（）{let formData=新formData（）；formData.append（“file”，file.files[0]）；wait-fetch（'addFile.do'，｛method:“POST”，body:formData｝）；alert（“上传的数据：”）；}<span>文件</span><input type=“file”id=“file”name=“file”size=“10”/><input type=“button”value=“Upload”onclick=“saveFile（）”/>
content-type='multipart/form-data'由浏览器自动设置，文件名也自动添加到文件名FormData参数中（服务器可以轻松读取）。下面是一个更为成熟的错误处理和json添加示例
异步函数saveFile（inp）{让用户＝{name:'john'，年龄：34}；let formData=新formData（）；let photo=inp.files[0]；formData.append（“照片”，照片）；formData.append（“用户”，JSON.stringify（用户））；尝试{let r=等待获取（'/upload/image'，｛method:“POST”，body:formData｝）；console.log（'HTTP响应代码：'，r.status）；警报（“成功”）；}捕获（e）{console.log（'休斯顿我们有问题…：'，e）；}}<input-type=“file”onchange=“saveFile（this）”><br><br>在选择文件之前，打开chrome控制台>网络选项卡以查看请求详细信息。<br><br><small>因为在本例中，我们将请求发送到https://stacksnippets.net/upload/image响应代码当然是404</小>
这是我的解决方案。
<form enctype="multipart/form-data">
<div class="form-group">
<label class="control-label col-md-2" for="apta_Description">Description</label>
<div class="col-md-10">
<input class="form-control text-box single-line" id="apta_Description" name="apta_Description" type="text" value="">
</div>
</div>
<input name="file" type="file" />
<input type="button" value="Upload" />
</form>
和js
<script>
$(':button').click(function () {
var formData = new FormData($('form')[0]);
$.ajax({
url: '@Url.Action("Save", "Home")',
type: 'POST',
success: completeHandler,
data: formData,
cache: false,
contentType: false,
processData: false
});
});
function completeHandler() {
alert(":)");
}
</script>
控制器
[HttpPost]
public ActionResult Save(string apta_Description, HttpPostedFileBase file)
{
[...]
}
在此处查找“异步处理文件的上载过程”：https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications
链接中的示例
<?php
if (isset($_FILES['myFile'])) {
// Example:
move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']);
exit;
}
?><!DOCTYPE html>
<html>
<head>
<title>dnd binary upload</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function sendFile(file) {
var uri = "/index.php";
var xhr = new XMLHttpRequest();
var fd = new FormData();
xhr.open("POST", uri, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// Handle response.
alert(xhr.responseText); // handle response.
}
};
fd.append('myFile', file);
// Initiate a multipart/form-data upload
xhr.send(fd);
}
window.onload = function() {
var dropzone = document.getElementById("dropzone");
dropzone.ondragover = dropzone.ondragenter = function(event) {
event.stopPropagation();
event.preventDefault();
}
dropzone.ondrop = function(event) {
event.stopPropagation();
event.preventDefault();
var filesArray = event.dataTransfer.files;
for (var i=0; i<filesArray.length; i++) {
sendFile(filesArray[i]);
}
}
}
</script>
</head>
<body>
<div>
<div id="dropzone" style="margin:30px; width:500px; height:300px; border:1px dotted grey;">Drag & drop your file here...</div>
</div>
</body>
</html>
