前台html:

 <div class="b-mg15 img-text" room_id="<?= $items['id'] ?>">
<a class="modal-get">
<img <?php if ($items['room_image']) {
$url = Url::to('@web' . '/' . $items['room_image']);
echo 'src' . '=' . $url;
} ?> id="room_image">
</a>
<div class="pull-txt upload_image"
room_id="<?= $items['id'] ?>" <?php if ($items['room_image']) echo "style=\"display: none\"" ?>>
<div class="b-mg15 t-mg60">
<span class="glyphicon glyphicon-user f50">
</span>
</div>
<a class="">
点击上传会议室图片
</a>
</div>

js代码:

   $(".img-text").click(function () {
$("#fileToUpload").click();
$("#fileToUpload").attr('room_id', $(this).attr('room_id'));
});
//选择文件之后执行上传
$('#fileToUpload').on('change', function () {
$.ajaxFileUpload({
url: "<?=Url::toRoute('ajax-upload')?>",
secureuri: false,
fileElementId: 'fileToUpload',//file标签的id
dataType: 'json',//返回数据的类型
data: {_csrf: "<?=Yii::$app->request->getCsrfToken()?>", room_id: $(this).attr('room_id')},//一同上传的数据
success: function (data) {
//把图片替换
$("#room_image").attr('src', data.result);
window.location.reload();
},
error: function (data, status, e) {
alert(e);
}
});
});

后台 php 代码:

  /**
* ajax 上传图片
* @return string
*/
public function actionAjaxUpload()
{
return json_encode(MeetRoomService::AjaxUploadImage());
}
   /**
* ajax 上传图片
* @return string
*/
public static function AjaxUploadImage()
{
$returnData = [];
$company_id = Yii::$app->company->getId();
$room_id = Yii::$app->request->post('room_id','');
$room = MeetRooms::find()->where(['id'=>$room_id])->one();
$typeArr = array("jpg", "png", "gif");//允许上传文件格式
$path = 'meetRoomImg/' . $company_id.'/';
$dirPath = 'meetRoomImg';
if(!file_exists($dirPath))
{
mkdir($dirPath, 0777);
chmod($dirPath, 0777);
}
if (!file_exists($path)) { mkdir($path, 0777);
chmod($path, 0777);
}
if (isset($_POST)) {
$name = $_FILES['upfile']['name'];
$size = $_FILES['upfile']['size'];
$name_tmp = $_FILES['upfile']['tmp_name'];
if (empty($name)) {
$returnData['error'] = '您还未选择图片';
$returnData['code'] = 400;
return $returnData;
}
$type = strtolower(substr(strrchr($name, '.'), 1)); //获取文件类型
if (!in_array($type, $typeArr)) {
$returnData['error'] = '请上传jpg,png或gif类型的图片!';
$returnData['code'] = 400;
return $returnData;
}
if ($size > (5000 * 1024)) {
$returnData['error'] = '图片大小已超过5000KB';
$returnData['code'] = 400;
return $returnData;
}
$yCode = array('A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J');
$orderSn = $yCode[intval(date('Y')) - 2011] . strtoupper(dechex(date('m'))) . date('d') . substr(time(), -5) . substr(microtime(), 2, 5) . sprintf('%02d', rand(0, 99));
$pic_url = $path . '/' . date('Y-m-d') . $orderSn . '.' .$type;
$pic_name = date('Y-m-d') . $orderSn . '.' .$type;
if (move_uploaded_file($name_tmp, $pic_url)) { //临时文件转移到目标文件夹
$room->room_image = $pic_url;
$room->save(false);
$returnData['error'] = '0';
$returnData['result'] = $pic_url;
$returnData['code'] = 200;
} else {
$returnData['error'] = '上传有误,清检查服务器配置!';
$returnData['code'] = 400;
}
return $returnData;
}
}

注意问题:

上传成功之后没有执行回调函数。

打开ajaxfileupload.js拉到底下找到

[javascript] view plain copy
if ( type == "json" ) {
eval( "data = " + data );
}

改成:
[javascript] view plain copy
if ( type == "json" ) {
data = data.replace("<pre>","").replace("</pre>","");
//data = eval("("+data.replace("<pre>","").replace("</pre>","")+")");

链接:http://pan.baidu.com/s/1c2HWlRa 密码:ofb0

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

  1. ajax上传图片

    选择文件后 ajax上传图片到后台,后台执行保存操作,返回上传的图片路径,显示到页面 需要引入ajaxfileupload.js js代码 <script type="text/jav ...

  2. sql server 关于表中只增标识问题 C# 实现自动化打开和关闭可执行文件(或 关闭停止与系统交互的可执行文件) ajaxfileupload插件上传图片功能,用MVC和aspx做后台各写了一个案例 将小写阿拉伯数字转换成大写的汉字, C# WinForm 中英文实现, 国际化实现的简单方法 ASP.NET Core 2 学习笔记(六)ASP.NET Core 2 学习笔记(三)

    sql server 关于表中只增标识问题   由于我们系统时间用的过长,数据量大,设计是采用自增ID 我们插入数据的时候把ID也写进去,我们可以采用 关闭和开启自增标识 没有关闭的时候 ,提示一下错 ...

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

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

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

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

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

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

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

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

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

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

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

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

  9. 十六、ajax上传图片 mvc

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

随机推荐

  1. sublimtest3文件名乱码问题及解决方案

    在sublime text 3中,Preference, Settings-User,最后加上一行"dpi_scale": 1.0覆盖操作系统设置的DPI. 这是我的Setting ...

  2. 从clone()谈protected

    看到Object的clone()是protected的,然后看到<java2认证考试指南>上描述:一个对象只能请求其他对象的克隆,后者的类与被克隆对象属于同一类,或是被克隆对象的子类. e ...

  3. r个有标志的球放进n个不同的盒子里,要求无一空盒,问有多少种不同的分配方案?

           由题意可知道r>=n,我原来想的是先取n个全排列,剩下的r-n个每个有n中选择,所以结果是n!*n^(r-n).经满神猜测,这样是会重复的.比如说,1到5个球,ABC三个盒子,ms ...

  4. DJANGO:从当前用户的所属用户组里查找其所拥有的权限矩阵

    没办法,随时项目越来越精进,要求也越来越多. 以前的权限精度已满足不了现在的要求, 那就设计一个权限矩阵,用HOOK返回来判断吧... [莫名其妙的ORM,留个念想] 主要是在表之间的跳转,要注意语法 ...

  5. node.js + gulp用JENKINS作CI编译

    这里还是有点坑,要注意. 安装NODE.JS不说,GULP绿色化也不说. 但要让JENKINS识别环境变量. /etc/profile.... export NODE_HOME=/usr/local/ ...

  6. GridView使用CommandField删除列实现删除时提示确认框

    在.net2005提供的GridView中我们可以直接添加一个CommandField删除列完后在它的RowDeleting事件中完成删除 GridView在使用CommandField删除时弹出提示 ...

  7. Android 带着用户名的SharedPreferences

    /** * 设置当前用户的签到信息 * account&info;account&info * * @param context * @param sign * @author jrj ...

  8. .Net remoting, Webservice,WCF,Socket区别

    传统上,我们把计算机后台程序(Daemon)提供的功能,称为"服务"(service).比如,让一个杀毒软件在后台运行,它会自动监控系统,那么这种自动监控就是一个"服务& ...

  9. 【图片处理】cocos2dx png图片压缩处理

    一.介绍 美术用photoshop出图有时候会包含一些无用的信息,这时候image magick可以把这些信息裁掉. 二.使用方法 1.下载并安装Image Magick 2.将脚本里的目录名改成Im ...

  10. c while 循环

    c代码: #include <stdio.h> int main(void){ unsigned long sum=1UL; unsigned int j=1U; unsigned ; p ...