ajax上传图片
选择文件后 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上传图片的更多相关文章
- ajaxfileUpload ajax 上传图片使用
前台html: <div class="b-mg15 img-text" room_id="<?= $items['id'] ?>"> ...
- 使用ajax上传图片,支持图片即时浏览,支持js图片压缩后上传给服务器
使用ajax上传图片,支持图片即时浏览,支持js图片压缩后上传给服务器 ajax上传主要使用了 var reader = new FileReader() 此方法 js图片压缩主要是利用canvas进 ...
- Ajax上传图片以及上传之前先预览
手头上有几个小项目用到了easyUI,一开始决定使用easyUI就注定了项目整体上前后端分离,基本上所有的请求都采用Ajax来完成.在文件上传的时候用到了Ajax上传文件,以及图片在上传之前的预览效果 ...
- asp.net core 通过ajax上传图片及wangEditor图片上传
asp.net core 通过ajax上传图片 .net core前端代码,因为是通过ajax调用,首先要保证ajax能调用后台代码,具体参见上一篇.net core 使用ajax调用后台代码. 前端 ...
- vuejs使用FormData对象,ajax上传图片文件
我相信很多使用vuejs的朋友,都有采用ajax上传图片的需求,因为前后端分离后,我们希望都能用ajax来解决数据问题,传统的表单提交会导致提交成功后页面跳转,而使用ajax能够无刷新上传图片等文件. ...
- php form表单ajax上传图片方法
form表单ajax上传图片方法 先引用jquery.form.js 前台代码<pre><form id="form1"> <input id=&qu ...
- 使用ajax上传图片,并且使用canvas实现出上传进度效果
前端代码: <%@ page contentType="text/html;charset=UTF-8" language="java" %> &l ...
- 十六、ajax上传图片 mvc
一.ajax上传图片 mvc 前台html <img id="uploadimg1" class="uploadimg" src="~/ ...
- 移动端压缩并ajax上传图片解决方案
1.需求 做一个前端可压缩并且上传图片到后台的功能 2.使用组件 用到的主要是jq和LocalResizeIMG这2个库 3.使用方法 a.引入脚本文件 <script type='text/j ...
随机推荐
- JavaWeb学习篇之----HTTP协议详解
简介: HTTP是hypertexttransfer protocol(超文本传输协议)的简写,它是TCP/IP协议的一个应用层协议,用于定义WEB浏览器与WEB服务器之间交换数据的过程. HTTP协 ...
- Linux下添加shell脚本使得nginx日志每天定时切割压缩
Linux下添加shell脚本使得nginx日志每天定时切割压缩一 简介 对于nginx的日志文件,特别是access日志,如果我们不做任何处理的话,最后这个文件将会变得非常庞大 这时,无论是出现异常 ...
- EF6多线程与分库架构设计之Repository
1.项目背景 这里简单介绍一下项目需求背景,之前公司的项目基于EF++Repository+UnitOfWork的框架设计的,其中涉及到的技术有RabbitMq消息队列,Autofac依赖注入等常用的 ...
- db2_errroecode
sqlcode sqlstate 说明 000 00000 SQL语句成功完成 01xxx SQL语句成功完成,但是有警告 +012 01545 未限定的列名被解释为一个有相互关系的引用 +09 ...
- CentOS7 设置局域网固定IP
题记: 在局域网内PC通常都是采用自动获取IP的方式从路由器拿到局域网IP的,每次PC启动后分配到的局域网IP都不一定相同.但是出于某些特殊的需求,例如要在局域网内做端口映射,需要将PC设置成使用固定 ...
- 初学bootstrap ---栅格系统
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- java-9 异常处理
1.异常处理的基础知识 异常是程序中的一些错误,但并不是所有的错误都是异常,并且错误有时候是可以避免的. 比如说,你的代码少了一个分号,那么运行出来结果是提示是错误 java.lang.Error:如 ...
- ajax提交File文件
<script type="text/javascript"> $(function() { $("input[name='image'] ...
- Java初学练习答案(循环)
/* 题目如下: 1 (for 循环)*编程找出四位整数abcd 中满足下述关系的数. (ab+cd)(ab+cd)=abcd 2 (循环)*读入一个整数n,输出如下图形 n = 3 * *** ** ...
- View Controller Transition:京东加购物车效果
冬天已经过去了,阳光越来越暖洋洋的了.还记得上学的时候,老师总说"春天是播种的季节",而我还没在朋友圈许下什么愿望.一年了,不敢想象回首还能看到点什么,所以勇往直前.当被俗世所扰, ...