使用jquery.form.js上传图片或文件
这个插件是通过ajax的方式提交整个表单,然后可以返回信息到提交的页面去。要注意的是,这个插件适用于只提交图片等文件的情况,如果表单里面还有其他信息要提交的话,得看具体情况,比如说,要提交图片,返回信息,再提交表单里面的信息的时候,这个插件就不怎么适合。
我使用的时候是提交图片,上传完成后返回图片的id和url,显示图片。
jsp里面导入控件
<script type="text/javascript" src="../js/jquery-form.js"></script>
function upload1(o) {var hideForm = $('#insertPicForm'), $file = $(o).clone();hideForm.append($file);var options = {dataType : "json",beforeSubmit : function() {alert("正在上传");},success : function(result) {alert('成功上传!');var data = jQuery.parseJSON(result.result);document.getElementById("photoId").value = data.photoId;var photoUrl = document.getElementById("photoUrl");photoUrl.src = data.photoUrl;$file.remove();},error : function(result) {var data = jQuery.parseJSON(result.result);var message = data.message;$file.remove();alert(message);}};hideForm.ajaxSubmit(options);return !1;}
dataType是返回回来的类型。
jsp里面;
<div style="display: hidden"><s:form action="/theme/ajaxTheme!insert.action" method="post" id="insertPicForm" enctype="multipart/form-data"><input type="hidden" size="20px" id="picTag" name="picTag" /></s:form>
</div>
<input type="file" name="upload" id="upload" class="text_input"οnchange="upload1(this)" /><input type="hidden" name="photoId" id="photoId" size="20px"value="<s:property value='photoId'/>" /><br><img src="<s:property value="photoUrl" />" id="photoUrl"name="photoUrl" width="150px" height="30px" />
我用了种非常别扭的方式,把form1里面图片的信息复制到另外一个form里面,叫他form2吧,实际上我提交的是form2,但是这种方法很不好,而且有浏览器的限制问题,在火狐里面是可以用的。
如果是只包含图片的表单,在IE下,要注意在后台里面写上
HttpServletResponse res = ServletActionContext.getResponse();res.setContentType("text/html;charset=utf-8");
这样据不会出现下载窗口了。
使用jquery.form.js上传图片或文件相关推荐
- ajax上传文件表单,图片、文件无刷新上传,jquery.form.js的使用
我们在进行一些web开发时,有时会需要上传文件,图片等等的功能.这篇文章记录一下我实现用ajax实现无刷新上传图片的方法. 我们先要了解一下ajax,在前后端分离的开发环境中ajax被广泛的用原来前后 ...
- jquery.form.js java_使用jQuery.form.js/springmvc框架实现文件上传功能
使用的技术有jquery.form.js框架, 以及springmvc框架.主要实现异步文件上传的同时封装对象,以及一些注意事项. 功能本身是很简单的,但是涉及到一些传递参数类型的问题.例如:jque ...
- jquery.form.js ajax提交上传文件
项目中最近有用到表单提交,是带有图片上传的表单录入,需要ajax异步提交,网上找了好多例子都是只能提交上传字段一个信息的,这里整理一下.表单里有普通文本信息字段也有图片上传字段. 1.jsp代码--引 ...
- jquery.form.js的ajaxSubmit和ajaxForm使用(用于多文件上传以及其他参数的混合提交)
jquery.form.js的ajaxSubmit和ajaxForm使用(用于多文件上传以及其他参数的混合提交) ajaxSubmit 和ajaxForm区别 ajaxForm ajaxForm()不 ...
- jquery.form.js在ie8下提示下载文件
1.后台返回html格式的json文档 也就是设置content类型为:response.setContentType("text/html"); //renderJson(res ...
- jQuery.form.js使用
jQuery.form.js是一个form插件,支持ajax表单提交和ajax文件上传. 下载地址 百度云:http://pan.baidu.com/s/1eQoYE46 360云:http://yu ...
- 利用jquery.form.js实现Ajax无刷新图片上传及预览功能
某些时候当我们做登记页面的时候可能需要上传图片,并实现即时预览的功能. 如果只是预览而不上传,可以使用ImagePreview来实现,方便简单.如果需要上传,那么你也可以使用uploadify无刷新上 ...
- 【jQuery】使用jquery.form.js,获取提交表单返回值
jQuery表单库介绍 实现 html 中提交表单并实现不跳转页面处理返回值 jQuery表单库(jquery.form.js库)以jQuery为基础,用于处理表单AJAX提交,使得表单AJAX提交简 ...
- jQuery.Form.js 异步提交表单使用总结
jQuery.Form.js 是一个用于使用jQuery异步提交表单的插件,它使用方法简单,支持同步和异步两种方式提交. 第一步:引入jQuery与jQuery.Form.js 1 <scrip ...
最新文章
- 机器人学习--ROS/AMCL实现初始化粒子撒满整张地图和分步收敛
- 服务器文件协议,文件服务器协议
- HEVC概念缩写对照表
- php成行排列,一个php实现的生成排列的算法
- Eureka常用配置
- unix 时间戳转化为 日期格式
- MySQL数据库的卸载
- EhCache的使用
- GDS中如何加logo
- 永磁同步电机数学模型
- linux c语言修改文件权限,C语言再学习 -- 修改linux文件权限
- html pdf支持css%写法吗,flying-saucer-pdf终于完美解决了(中文问题,换行问题,分页,页眉页脚,水印),html+css控制pdf样式...
- 济南计算机专业职业学校排名,济南计算机专业学校排名
- Gradle简单配置
- Ubuntu鼠标延迟,闪烁,消失
- 关于504报错的解决方法之一
- css如何添加模糊效果,css动态模糊效果
- 主线程 如何控制 子线程
- 在Devil的软件三角中管理成功; 项目,项目经理和开发人员
- C++入门:鸡兔同笼问题