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)" /> 方式一) ...
随机推荐
- AC日记——二叉树最大宽度和高度 1501 codevs
1501 二叉树最大宽度和高度 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 白银 Silver 题目描述 Description 给出一个二叉树,输出它的最大宽 ...
- jdbc与 Beanshell PostProcessor 对多条结果的处理
配置了数据库后,可以通过Beanshell对结果进行特别的操作,一下为对多条数据的处理 数据库的配置如图:
- guava
原文出处: 黄博文 如果我要新建一个java的项目,那么有两个类库是必备的,一个是junit,另一个是Guava.选择junit,因为我喜欢TDD,喜欢自动化测试.而是用Guava,是因为我喜欢简洁的 ...
- SpringMVC讲解
2.1.Spring Web MVC是什么 Spring Web MVC是一种基于Java的实现了Web MVC设计模式的请求驱动类型的轻量级Web框架,即使用了MVC架构模式的思想,将web层进行职 ...
- Java多态:upcast和downcast
upcast例: public class Test { public static void main(String[] args) { Cup aCup = new BrokenCup(); aC ...
- IIS 应用程序池.NET40 重新注册
32位的Windows:---------------------------------------------------------------------------1. 运行->cmd ...
- Windows 8.1 新增控件之 CommandBar
上一篇为大家介绍了AppBar 的相关内容,本篇继续介绍CommandBar 的使用方法.与AppBar 相比而言,CommandBar 在开发使用方面较为单一,在按键布局上分为主控区(Primary ...
- [转]源代码的管理和发布:以SVN为例
FROM : http://ju.outofmemory.cn/entry/47277 前几天在微博吐槽了SVN的几个不爽的地方:.svn文件满天飞.分支管理的麻烦.不爽一般来说都是有过对比后才有如此 ...
- Oracle 创建 split 和 splitstr 函数
Sql语句最好依次执行创建 /************************************** * name: split * author: sean zhang ...
- 实时监控log文件
一个进程在运行,并在不断的写log,你需要实时监控log文件的更新(一般是debug时用),怎么办,不断的打开,关闭文件吗? 不用,至少有两个方法,来自两个很常用的命令: tail -f log.tx ...