jquery 上传文件

简介: 一、定义一个input file 并隐藏   二、点击一个图片时,打开input file的上传窗口   js function fileTest(){ $("#imgsFileInputTable").

一、定义一个input file 并隐藏

<input id="imgsFileInputTable" type="file" size="45" accept="image/gif,image/png,image/jpeg" name="uploadFileInput" class="input" style="display:none;" onchange="ajaxFileUploadTable(上传文件参数)"/>

 

二、点击一个图片时,打开input file的上传窗口
<img src="upload/img/noimg.png" onclick="fileTest()"
id="imgUploadSmallImg" class="showdataPacksSmallIMg" />

 

js

function fileTest(){
$("#imgsFileInputTable").click();
}

 三、窗口中上传图片 input file 会触发change事件,change调用异步上传文件js函数

 $.ajaxFileUpload({

url:'FileUpload',
secureuri:false,
fileElementId:uploadFileInput, //文件选择框的id属性
dataType: 'json', //服务器返回的格式,可以是json
timeout:7000,
success:function (data, status) //相当于java中try语句块的用法
{

  在这里更新img 的图片

},
error: function (data, status, e) //相当于java中catch语句块的用法
{

}

成功后更新 点击的当前图片内容

 

相关文章
|
8月前
|
JavaScript 前端开发 Windows
jQuery的ztree仿windows文件新建和拖拽效果
jQuery的ztree仿windows文件新建和拖拽效果
41 0
|
8月前
|
JavaScript 前端开发 Java
bootsrap+jquery+组件项目引入文件的常见报错
bootsrap+jquery+组件项目引入文件的常见报错
59 0
|
1月前
|
JSON JavaScript 前端开发
jQuery获取json文件的方法
jQuery获取json文件的方法
18 2
|
24天前
|
移动开发 JavaScript 前端开发
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
|
2月前
|
JSON 前端开发 JavaScript
jQuery ajax读取本地json文件 三级联动下拉框
jQuery ajax读取本地json文件 三级联动下拉框
|
前端开发 JavaScript
开源炫酷css轮播图 可直接引入html文件使用 含注释 jQuery插件
开源炫酷css轮播图 可直接引入html文件使用 含注释 jQuery插件
111 0
开源炫酷css轮播图 可直接引入html文件使用 含注释 jQuery插件
|
Web App开发 JavaScript 前端开发
浏览器自身为什么不集成js,jQuery文件?反正每个网站基本都会用到?
浏览器自身为什么不集成js,jQuery文件?反正每个网站基本都会用到?
94 0
|
JavaScript
jQuery模板文件
jQuery模板文件
65 0
|
开发框架 移动开发 前端开发
ASP.NET MVC中使用jQuery Ajax通过FormData对象异步提交图片文件到服务端保存并返回保存的图片路径
ASP.NET MVC中使用jQuery Ajax通过FormData对象异步提交图片文件到服务端保存并返回保存的图片路径
266 0
|
JavaScript 前端开发
JavaScript 技术篇-本地js文件里直接集成jQuery的方法,js文件不依赖html外部引用直接使用jquery方法
JavaScript 技术篇-本地js文件里直接集成jQuery的方法,js文件不依赖html外部引用直接使用jquery方法
173 0
JavaScript 技术篇-本地js文件里直接集成jQuery的方法,js文件不依赖html外部引用直接使用jquery方法