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)" /> 方式一) ...
随机推荐
- IE自动跳转到标准模式
<meta http-equiv="X-UA-Compatible" content="IE=edge">
- git 学习使用总结一(本地操作)
通过几天的学习,熟悉了 git 的一些常用命令,要用熟练和操作更复杂的功能还必须继续学习.不过 git 作为工具,它是用来提高我们的工作效率的工具,系统的学习之后可以暂且放放,等到以后实际项目中用到了 ...
- 网管把握市场需求，其实一点都不可怜 转载于 [http://tonyxiaohome.blog.51cto.com/925273/955589]
呵呵,这是我到51CTO做实习斑竹,回复的第一篇帖子,原帖在这里: http://bbs.51cto.com/thread-940532-1.html 这位朋友可能最近受到点挫折,所以有点小灰心,我呢 ...
- Ubuntu 14.04 下 Chromium 出现 未安装Adobe Flash Player 问题解决
Ubuntu 14.04 中,其他浏览器在安装Adobe Flash插件后可以播放视频及音乐,但是Chromium浏览器则会提示缺少Adobe Flash 插件. 原因:之前Chromium使用Net ...
- 第10章 同步设备I/O和异步设备I/O（2）_同步IO和异步IO基础
10.3 执行同步设备I/O (1)对设备读写操作的函数 ①ReadFile/WriteFile函数 参数 描述 hFile 文件句柄 pvBuffer 指向要接收文件数据的缓冲区或把缓冲区数据写入设 ...
- JAVA中的单利
单列:单例模式分三种:懒汉式单例.饿汉式单例.登记式单例三种.单例模式有一下特点:1.单例类只能有一个实例.2.单例类必须自己自己创建自己的唯一实例.3.单例类必须给所有其他对象提供这一实例. 一.懒 ...
- [No000049]狗日的中年——姜文
文件名 大小 [No000049]狗日的中年——姜文.7z 228KB
- 转: Eclipse 分屏显示同一个文件
Eclipse 分屏显示同一个文件 场景 : 某个类很大,可能有数千行.当你想要将类开头部分与中间或者靠后的部分进行对比时,请follow如下步骤: Window -> Editor -&g ...
- luogu[1279]字串距离
题目描述 设有字符串X,我们称在X的头尾及中间插入任意多个空格后构成的新字符串为X的扩展串,如字符串X为”abcbcd”,则字符串“abcb□cd”,“□a□bcbcd□”和“abcb□cd□”都是X ...
- Android应用更换package name以及ui refactoring error问题的有效解决
package name是Android系统中为每一个应用程序分配的一个标识,每个应用的标识都必须是不同的.在应用开发过程中,有时候可能需要对package name进行修改,这里主要总结修改pack ...