选择文件后 ajax上传图片到后台,后台执行保存操作,返回上传的图片路径,显示到页面

需要引入ajaxfileupload.js

js代码

<script type="text/javascript">
$(function() {
$("#file").live("change", function() {//现在这个已经适用于多个file表单。
ajaxFileUpload($(this).attr("id"), "rImg");
})
})
function ajaxFileUpload(file_id, img_id) {
var base = "${basePath}";
jQuery.ajaxFileUpload({
url : '${basePath}/upload/uploadTemp', //用于文件上传的服务器端请求地址
secureuri : false, //是否需要安全协议,一般设置为false
fileElementId : file_id, //文件上传域的ID
dataType : 'json', //返回值类型 一般设置为json
success : function(data, status)//服务器成功响应处理函数
{

if (data.errorCode == "success") {
$("#" + img_id).attr("src", base + data.data);
$("#pic").val(data.data);
//alert("ok:"+data.data);
} else {
alert("error:" + data.data);
}
},
error : function(data, status, e)//服务器响应失败处理函数
{
alert("图片上传失败");
}
})
return false;
}
</script>

html div

<div class="control-group">
<label class="control-label">服务项LOGO</label>
<div class="controls">
<input type="file" accept="image/*" name="file" id="file" /> <input
type="hidden" name="pic" id="pic" value="${service.pic }">
</div>
<div class="controls">
<img alt="" id="rImg"
<c:if test="${service.pic != null}">src="${imgPath}${service.pic}"</c:if>
style="width: 100px">
</div>
</div>

ajax上传图片的更多相关文章

  1. ajaxfileUpload ajax 上传图片使用

    前台html: <div class="b-mg15 img-text" room_id="<?= $items['id'] ?>"> ...

  2. 使用ajax上传图片,支持图片即时浏览,支持js图片压缩后上传给服务器

    使用ajax上传图片,支持图片即时浏览,支持js图片压缩后上传给服务器 ajax上传主要使用了 var reader = new FileReader() 此方法 js图片压缩主要是利用canvas进 ...

  3. Ajax上传图片以及上传之前先预览

    手头上有几个小项目用到了easyUI,一开始决定使用easyUI就注定了项目整体上前后端分离,基本上所有的请求都采用Ajax来完成.在文件上传的时候用到了Ajax上传文件,以及图片在上传之前的预览效果 ...

  4. asp.net core 通过ajax上传图片及wangEditor图片上传

    asp.net core 通过ajax上传图片 .net core前端代码,因为是通过ajax调用,首先要保证ajax能调用后台代码,具体参见上一篇.net core 使用ajax调用后台代码. 前端 ...

  5. vuejs使用FormData对象,ajax上传图片文件

    我相信很多使用vuejs的朋友,都有采用ajax上传图片的需求,因为前后端分离后,我们希望都能用ajax来解决数据问题,传统的表单提交会导致提交成功后页面跳转,而使用ajax能够无刷新上传图片等文件. ...

  6. php form表单ajax上传图片方法

    form表单ajax上传图片方法 先引用jquery.form.js 前台代码<pre><form id="form1"> <input id=&qu ...

  7. 使用ajax上传图片,并且使用canvas实现出上传进度效果

    前端代码: <%@ page contentType="text/html;charset=UTF-8" language="java" %> &l ...

  8. 十六、ajax上传图片 mvc

    一.ajax上传图片 mvc 前台html     <img id="uploadimg1" class="uploadimg" src="~/ ...

  9. 移动端压缩并ajax上传图片解决方案

    1.需求 做一个前端可压缩并且上传图片到后台的功能 2.使用组件 用到的主要是jq和LocalResizeIMG这2个库 3.使用方法 a.引入脚本文件 <script type='text/j ...

随机推荐

  1. context.Session[“xxx”]详解

    1.在aspx和aspx.cs中,都是以Session[“xxx”]=”aaa”和aaa=Session[“xxx”].ToString()进行读写.而在ashx中,Session都要使用contex ...

  2. 初识JSON

    ▓▓▓▓▓▓ 大致介绍 JSON(JavaScript Object Notation  JavaScript对象表示法),JSON是一种数据格式,不是一种编程语言.虽然它的名字中有JavaScrip ...

  3. HDU5475

    An easy problem Time Limit: 8000/5000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)T ...

  4. 利用享元模式来解决DOM元素过多导致的网页解析慢、卡死的问题

    我也不知道应该为本文的思路取一个什么比较恰当的标题,但是感觉符合享元模式的思路. 在一些网页应用中,有时会碰到一个超级巨大的列表,成千上万行,这时大部份浏览器解析起来就非常痛苦了(有可能直接卡死). ...

  5. ActionMode 就记这么一点,不能更多了

    话说程序猿都是段子手,看到有的程序猿写文章,前面都会先写一个段子,我这么有幽默感的段子手,也决定效仿一下. "段子." 写完段子,下面开始进入正题. 今天要说的 ActionMod ...

  6. EF+SQLSERVER控制并发下抢红包减余额(改进)

    最近几年想必大家一听到哪里有抢红包可以抢,马上会拿起手机点去~~~~然后问题来了... 如何控制在同一时间保证数据库中扣减红包余额不会出错.之前我们的做法是直接锁程序,这样子带来的坏处就是等待时间太长 ...

  7. c#类,接口,结构,抽象类介绍 以及抽象和接口的比较

    c#中的类是最常见的实际上就是对某种类型的对象定义变量和方法的原型. 结构是值类型,而类是引用类型. 1.与类不同,结构的实例化可以不使用 new 运算符.结构可以声明构造函数,但它们必须带参数. 2 ...

  8. 腾讯优图及知脸(ZKface)人脸比对接口测试(python)

    一.腾讯优图 1.开发者地址:http://open.youtu.qq.com/welcome/developer 2.接入流程:按照开发者页面的接入流程接入之后,创建应用即可获得所需的AppID.S ...

  9. Hadoop技巧(04):简易处理solr date 时区问题

    阅读目录 序 创建collection 模拟程序 示例下载 系列索引 本文版权归mephisto和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作. 文章是哥(mephisto)写的, ...

  10. C#表达式和语句

    表达式由操作数 (operand) 和运算符 (operator) 构成.表达式的运算符指示对操作数适用什么样的运算.运算符的示例包括+.-.*./ 和 new.操作数的示例包括文本.字段.局部变量和 ...