js获取上传的文件并用ajax提交
<form id="form1" name="form1" encType="multipart/form-data" method="post">
<input type="file" id="file" name="file" style="width:450">
<INPUT type="submit" value="上传文件" id="file_upload">
<br>
<font color="red">支持JPG,JPEG,GIF,BMP,SWF,RMVB,RM,AVI文件的上传</font>
</form>
<script type="text/javascript" src="http://libs.useso.com/js/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$('#file_upload').click(function(e){
e.preventDefault();
var data = new FormData();
var files = $('#file')[0].files;
if (files) {
data.append('imageFile',files[0]);
}
$.ajax({
cache: false,
type: 'post',
dataType: 'json',
url:'/web/file/getJsoncallback',
data :data,
contentType: false,
processData: false,
success : function (data) {
alert(1);
}
});
});
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title></title>
<script src="//cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
</head>
<body>
<div class="statusbar-overlay"></div>
<div class="panel-overlay"></div>
<div class="views">
<div class="view view-main">
<div class="pages">
<div data-page="leave" class="page navbar-fixed">
<div class="navbar m-navbar s-navbar-blue">
<div class="navbar-inner">
<a href="#" class="left u-arrow-left back link"></a>
<div class="center">请假</div>
<!-- <div class="center">采购申请</div> -->
</div>
</div>
<div class="page-content">
<form id="js_form" enctype="multipart/form-data">
<div class="list-block m-list">
<li class="images f-cb">
<div class="imgtxt">上传图片</div>
<ul>
<li>
<div class="addimg"><input type="file" class="js_addimg" multiple > <input type="hidden"/></div>
</li>
</ul>
</li>
</div>
<div class="m-tit">抄送人</div>
<div class="m-approveFlow f-cb">
<ul class="crosswise f-cb">
<li class="item f-cb">
<a href="./tool_person.html?sel=11">
<i class="add"></i>
</a>
</li>
</ul>
</div>
<div class="m-btn">
<a class="btn big blue radius" href="javascript:;">提交</a>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
var base={};
base.imgUploadUrl = "http://172.16.41.106:8083";
var $$=$=jQuery;
//tools
var tools = {};
tools.uploadImg = function() {
var req = null;
$$(".js_addimg").on("change", function() {
var _self = $(this);
//本地预览
var _path = window.URL.createObjectURL(this.files[0]);
$$('<li><img src="' + _path + '"></li>').insertBefore(_self.parent().parent());
//上传预览
var formData = new FormData();
formData.append('imageFile', this.files[0]);
if (req != null) {
return false;
}
req = $.ajax({
url: base.imgUploadUrl + "web/file/getJsoncallback",
//url:"http://127.0.0.1:3000/jsonp",
type: 'POST',
data: formData,
dataType: "json",
jsonp: 'jsonpcallback',
async: false,
cache: false,
contentType: false,
processData: false,
success: function(ret) {
req = null;
if (ret.success) {
debugger;
$$('<li><img src="' + base.imgUrl + ret.data["thumbnailUrl"] + '"></li>').insertBefore(_self.parent().parent());
} else {
$.hint(ret.msg);
}
},
error: function(ret) {
req = null;
$.hint("网络出错");
}
})
});
}
function imgUpload(el, params) {
window.arr=[];
var defaultParams = {
uploadLimit: 0, //上传图片张数限制，0为不限制
_uploadLimit: 0, //已上传图片张数
imgSize: '30',//以M为单位
fileTypeExts: '*.jpg,*.jpe,*.jpeg,*.png,*.gif'
};
var _params = $.extend({}, defaultParams, params);
var el = $(el);
if (_params['uploadLimit'] == 1) {
el.removeAttr('multiple');
}
el.on("change", function() {
var _self = $(this);
var imgs=[];
var files=_self.get(0).files;
//图片上传前过滤
if( _params['uploadLimit']!=0&& files.length+_uploadLimit>_params['uploadLimit']){
alert('最多上传"' +_params['uploadLimit'] + '"张图片');
return false;
}
if (_params['imgSize']) {
for (var i = 0, file; file = files[i]; i++) {
if (file.type.indexOf("image") == 0) {
if (file.size >= _params['imgSize']*1024*1024) {
alert('您这张"' + file.name + '"图片大小过大，应小于'+_params['imgSize']+"M");
} else {
imgs.push(file);
}
} else {
alert('文件"' + file.name + '"不是图片。');
}
}
}else{
imgs=files;
}
//本地预览
/* var _path = window.URL.createObjectURL(this.files[0]);
$$('<li><img src="' + _path + '"></li>').insertBefore(_self.parent().parent()); */
//上传预览
for(var i=0;i<imgs.length;i++){
var formData = new FormData();
formData.append('imageFile', imgs[i]);
$.ajax({
url: base.imgUploadUrl + "/web/file/getJsoncallback",
type: 'POST',
data: formData,
dataType: "json",
async: false,
cache: false,
contentType: false,
processData: false,
success: function(ret) {
if (ret.success) {
$$('<li><img src="' + base.imgUrl + ret.data["thumbnailUrl"] + '"></li>').insertBefore(_self.parent().parent());
_params['_uploadLimit']+=_params['_uploadLimit'];
arr.push(ret.data["thumbnailUrl"] )
} else {
$.hint(ret.msg);
}
},
error: function(ret) {
req = null;
$.hint("网络出错");
}
})
}
});
}
$(function(){
imgUpload($(".js_addimg"))
});
</script>
</body>
</html>
js获取上传的文件并用ajax提交的更多相关文章
- js获取上传的文件名称
<input name="file_" type="file" id="file_" size="100" /&g ...
- 怎么通过js获取上传的图片信息（临时保存路径，名称，大小）然后通过ajax传递给后端？
今天在论坛上看到这样一个问题,有必要编辑搜集下. 问题描述:怎么通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端 题主用jquery接收 <input name= ...
- js获取上传文件内容(未完待续)
js 获取上传文件的字节数及内容 <div> 上传文件 : <input type="file" name = "file" id = &qu ...
- Atitit.js获取上传文件全路径
Atitit.js获取上传文件全路径 1. 默认的value只能获取文件名..安全原因.. 1 2. Firefox浏览器的读取 1 3. Html5 的file api 2 4. 解决方法::使用a ...
- js获取上传文件内容
js 获取上传文件的字节数及内容 <div> 上传文件 : <input type="file" name = "file" id = &qu ...
- js+分布上传大文件
文件夹上传:从前端到后端 文件上传是 Web 开发肯定会碰到的问题,而文件夹上传则更加难缠.网上关于文件夹上传的资料多集中在前端,缺少对于后端的关注,然后讲某个后端框架文件上传的文章又不会涉及文件夹. ...
- JS原生上传大文件显示进度条-php上传文件
JS原生上传大文件显示进度条-php上传文件 在php.ini修改需要的大小: upload_max_filesize = 8M post_max_size = 10M memory_li ...
- JS获取上传文件的绝对路径，兼容IE和FF
<input type="file" id="fileBrowser" name="fileBrowser" size="5 ...
- JS获取上传文件的名称、格式、大小
<input id="File1" type="file" onchange="checkFile(this)" /> 方式一) ...
随机推荐
- Java Web之Servlet技术
1.Servlet基础 针对Servlet技术开发,Sun公司提供了一些列接口和类,其中最重要的是javax.servlet.Servlet接口,两个重要的包是javax.servlet和javax. ...
- SSM三大框架整合详细教程（Spring+SpringMVC+MyBatis）(转)
使用 SSM ( Spring . SpringMVC 和 Mybatis )已经有三个多月了,项目在技术上已经没有什么难点了,基于现有的技术就可以实现想要的功能,当然肯定有很多可以改进的地方.之前没 ...
- Visio连接数据表实体外键[快捷记录]
打开数据库模型图. 单击“常用”工具栏上的“连接线”工具. 将“连接线”工具放在父表的中心上,使表的四周出现轮廓线,然后拖到子表的中心.当子表出现轮廓线时,松开鼠标按钮. 两个连接点均变为红色,同时父 ...
- [bzoj3289]Mato的文件管理
Description Mato同学从各路神犇以各种方式(你们懂的)收集了许多资料,这些资料一共有n份,每份有一个大小和一个编号.为了防止他人偷拷,这些资料都是加密过的,只能用Mato自己写的程序才能 ...
- 实用js函数收集
1. 全选复选框: //复选框全选函数 function SelectAll() { var checkAll = document.getElementsByName("checkAll& ...
- asp.net webapi [FromBody]string 获取不到ajax post的数据的解决方法
webapi中如下([FromBody]string jsonData: public async Task<ResItem> Post([FromBody]string jsonData ...
- PAT 1007. 素数对猜想 (20)
让我们定义 dn 为:dn = pn+1 - pn,其中 pi 是第i个素数.显然有 d1=1 且对于n>1有 dn 是偶数."素数对猜想"认为"存在无穷多对相邻且 ...
- Java核心技术点之注解
本博文是对Java中注解相关知识点的简单总结,若有叙述不清晰或是不准确的地方,希望大家可以指正,谢谢大家:) 一.什么是注解 我们大家都知道Java代码中使用注释是为了向以后阅读这份代码的人解释说明一 ...
- js profiler
https://developers.google.com/web/fundamentals/performance/critical-rendering-path/?hl=en https://de ...
- NOI2018准备Day5
3个半小时,连看题解带超过了一道二分题.