我想用jQuery异步上传文件。
$(document).ready(function () {
$("#uploadbutton").click(function () {
var filename = $("#file").val();
$.ajax({
type: "POST",
url: "addFile.do",
enctype: 'multipart/form-data',
data: {
file: filename
},
success: function () {
alert("Data Uploaded: ");
}
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<span>File</span>
<input type="file" id="file" name="file" size="10"/>
<input id="uploadbutton" type="button" value="Upload"/>
我只获取文件名,而不是上传文件。我该怎么做才能解决此问题?
使用HTML5,你可以使用Ajax和jQuery进行文件上传。不仅如此,你还可以执行文件验证(名称,大小和MIME类型)或使用HTML5进度标签(或div)处理进度事件。最近,我不得不制作一个文件上传器,但是我不想使用Flash,iframes或插件,经过一番研究后,我想到了解决方案。
HTML:
<form enctype="multipart/form-data">
<input name="file" type="file" />
<input type="button" value="Upload" />
</form>
<progress></progress>
首先,你可以根据需要进行一些验证。例如,在.on(‘change’)文件的情况下:
$(':file').on('change', function () {
var file = this.files[0];
if (file.size > 1024) {
alert('max upload size is 1k');
}
// Also see .name, .type
});
现在$.ajax()
单击带有按钮的提交:
$(':button').on('click', function () {
$.ajax({
// Your server script to process the upload
url: 'upload.php',
type: 'POST',
// Form data
data: new FormData($('form')[0]),
// Tell jQuery not to process data or worry about content-type
// You *must* include these options!
cache: false,
contentType: false,
processData: false,
// Custom XMLHttpRequest
xhr: function () {
var myXhr = $.ajaxSettings.xhr();
if (myXhr.upload) {
// For handling the progress of the upload
myXhr.upload.addEventListener('progress', function (e) {
if (e.lengthComputable) {
$('progress').attr({
value: e.loaded,
max: e.total,
});
}
}, false);
}
return myXhr;
}
});
});
如你所见,借助HTML5(和一些研究),文件上传不仅成为可能,而且超级容易。请尝试使用Google Chrome浏览器,因为示例的某些HTML5组件并非在所有浏览器中都可用。
本文向大家介绍JavaScript中三种异步上传文件方式,包括了JavaScript中三种异步上传文件方式的使用技巧和注意事项,需要的朋友参考一下 异步上传文件是为了更好的用户体验,是每个前端必须掌握的技能。这里我提出三点有关异步文件上传的方式。 使用第三方控件,如Flash,ActiveX等浏览器插件上传。 使用隐藏的iframe模拟异步上传。 使用XMLHttpRequ
本文向大家介绍原生JavaScript实现异步多文件上传,包括了原生JavaScript实现异步多文件上传的使用技巧和注意事项,需要的朋友参考一下 这是在上篇的修改版本。后台代码不变就可以接着使用,但是脚本不再使用jQuery了,改为原生的JavaScript 代码,所以我们主要看JS代码。 先介绍一下技术参数: 页面技术:HTML5 后台技术:Servlet 3.0 服务器:Tomcat 7.0
快速上手 demo 地址 https://github.com/ChenShenhai/koa2-note/tree/master/demo/upload-async 源码理解 demo源码目录 . ├── index.js # 后端启动文件 ├── node_modules ├── package.json ├── static # 静态资源目录 │ ├── image # 异步上传图片存储
本文向大家介绍原生javascript实现文件异步上传的实例讲解,包括了原生javascript实现文件异步上传的实例讲解的使用技巧和注意事项,需要的朋友参考一下 效果图: 代码:(demo33.jsp) 以上这篇原生javascript实现文件异步上传的实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持呐喊教程。
jQuery异步上传, 其使用原理是iframe. 特点: 小巧 简单 使用方法 1 在页面引入jquery.upload js 2 代码 // upload_img 为一个按钮, 点击时选择文件上传$("#upload_img").click(function() { // 上传方法 $.upload({ // 上传地址
本文向大家介绍浅谈struts1 & jquery form 文件异步上传,包括了浅谈struts1 & jquery form 文件异步上传的使用技巧和注意事项,需要的朋友参考一下 1.概述 还在用struts1?是的,在地球的没写地方,落后的生产方式还在运转(老项目). 从 继承org.apache.struts.action.Action, 继承org.apache.struts.actio