我想用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”/>
我只得到文件名，而不是上传文件。我可以做什么来解决这个问题？
当前回答
这个AJAX文件上传jQuery插件在某处上传文件，并传递对回调的响应。
它不依赖于特定的HTML，只需给它一个＜input-type=“file”＞它不要求服务器以任何特定方式响应使用多少文件或文件在页面上的位置无关紧要
--尽可能少地使用--
$('#one-specific-file').ajaxfileupload({
'action': '/upload.php'
});
--或者--
$('input[type="file"]').ajaxfileupload({
'action': '/upload.php',
'params': {
'extra': 'info'
},
'onComplete': function(response) {
console.log('custom handler for file:');
alert(JSON.stringify(response));
},
'onStart': function() {
if(weWantedTo) return false; // cancels upload
},
'onCancel': function() {
console.log('no file selected');
}
});
其他回答
我找到的一个解决方案是让<form>以隐藏iFrame为目标。iFrame然后可以运行JS向用户显示它已完成（页面加载时）。
在使用XMLHttpRequest进行异步上载时，可以传递附加参数和文件名（不依赖flash和iframe）。将附加参数值附加到FormData并发送上载请求。
var formData = new FormData();
formData.append('parameter1', 'value1');
formData.append('parameter2', 'value2');
formData.append('file', $('input[type=file]')[0].files[0]);
$.ajax({
url: 'post back url',
data: formData,
// other attributes of AJAX
});
此外，Syncfusion JavaScript UI文件上传只需使用事件参数即可为该场景提供解决方案。您可以在此处找到文档，并在此处输入链接描述
您可以使用JavaScript或jQuery进行异步多文件上传，而无需使用任何插件。您还可以在进度控件中显示文件上载的实时进度。我遇到了两个不错的链接-
带有进度条的基于ASP.NET Web表单的多文件上载功能jQuery中基于ASP.NET MVC的多文件上载
服务器端语言是C#，但您可以进行一些修改，使其与其他语言（如PHP）一起使用。
文件上载ASP.NET核心MVC：
在html中的View create file upload控件中：
<form method="post" asp-action="Add" enctype="multipart/form-data">
<input type="file" multiple name="mediaUpload" />
<button type="submit">Submit</button>
</form>
现在在控制器中创建动作方法：
[HttpPost]
public async Task<IActionResult> Add(IFormFile[] mediaUpload)
{
//looping through all the files
foreach (IFormFile file in mediaUpload)
{
//saving the files
string path = Path.Combine(hostingEnvironment.WebRootPath, "some-folder-path");
using (var stream = new FileStream(path, FileMode.Create))
{
await file.CopyToAsync(stream);
}
}
}
hostingEnvironment变量的类型为IHostingEnvironment，可以使用依赖注入将其注入控制器，例如：
private IHostingEnvironment hostingEnvironment;
public MediaController(IHostingEnvironment environment)
{
hostingEnvironment = environment;
}
注意：此答案已过时，现在可以使用XHR上载文件。
不能使用XMLHttpRequest（Ajax）上载文件。可以使用iframe或Flash模拟效果。优秀的jQuery表单插件，通过iframe发布文件以获得效果。
使用|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);
