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)" /> 方式一) ...
随机推荐
- iOS中的存储方式
1.Plist 1.1 了解沙盒 每个iOS应用都有自己的应用沙盒(应用沙盒就是文件系统目录),与其它文件系统隔离.应用必须呆在自己的沙盒里.其它应用不能访问该沙盒. 一个程序中所有的非代码文件都可以 ...
- Python的高级特性9:蹩脚的多态
学习了java再来看python的多态,总感觉怪怪的,很蹩脚.. 1.python的父类根本不能调用子类的方法,只能蹩脚的依靠重写方法,然后在运行时去调用,实现伪多态... 2.所谓的鸭子类型看起来很 ...
- CentOS 6.4 下安装vsftpd
概述: vsftpd是Linux下比较著名的FTP服务器,搭建FTP服务器当然首选这个. 本文介绍了在CentOS 6.4下安装vsftpd.配置虚拟用户登录FTP的过程. 正文: 一:安装vsftp ...
- 035医疗项目-模块三：药品供应商目录模块——供货商药品目录（批量）添加药品的功能---------Service
这篇文章我们重点介绍Service层.因为Dao层就是用Gysypml逆向生成的Mapper就可以了.所以这里重点讲解Service层. 业务逻辑如下: 1:我们从前端页面传入有两个值:1:userg ...
- AngularJS中的指令
欢迎大家讨论与指导 : ) 前言 当AngularJS中的内置指令不能满足我们的需求,或者当我们需要创建一个能够用于多个AngularJS程序的自包含的功能单元时,我们应该创建自定义指令来满足需求. ...
- 使用管道（PipeLine）和批量（Batch）操作
使用管道(PipeLine)和批量(Batch)操作 前段时间在做用户画像的时候,遇到了这样的一个问题,记录某一个商品的用户购买群,刚好这种需求就可以用到Redis中的Set,key作为product ...
- DefaultFilesMiddleware中间件如何显示默认页面
DefaultFilesMiddleware中间件如何显示默认页面 DefaultFilesMiddleware中间件的目的在于将目标目录下的默认文件作为响应内容.我们知道,如果直接请求的就是这个默认 ...
- codevs2010 求后序遍历
难度等级:白银 2010 求后序遍历 题目描述 Description 输入一棵二叉树的先序和中序遍历序列,输出其后序遍历序列. 输入描述 Input Description 共两行,第一行一个字符串 ...
- 如何在前台脚本通过json传递数据到后台(使用微软自带的ajax)
首先,我们要在前台引入json的脚本,以便于把js对象序列化 <script type="text/javascript" src="/js/jquery.json ...
- 纯C#实现Hook功能
发布一个自己写的用于Hook .Net方法的类库,代码量不大,完全的C#代码实现,是一个比较有趣的功能,分享出来希望能和大家共同探讨 安装:Install-Package DotNetDetour源码 ...