ajaxfileUpload ajax 上传图片使用
2016-09-29 12:36
489 查看
前台html:
js代码:
后台 php 代码:
注意问题:
上传成功之后没有执行回调函数。
打开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
<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
相关文章推荐
- jquery file upload ajax上传图片 简单使用
- php使用AjaxFileUpload上传图片文件实例
- 使用ajax上传图片(ajaxfileupload.js)
- 关于ajaxfileupload.js上传图片使用历程(struts2)
- SpringMVC中使用ajaxfileupload异步上传图片文件视频
- Struts2中的异步提交(ajaxfileupload异步上传(图片)插件的使用)
- Struts2中的异步提交(ajaxfileupload异步上传(图片)插件的使用)
- ASP.NET MVC 中使用 AjaxFileUpload 插件时,上传图片后不能显示(预览)
- 使用ajaxfileupload插件实现异步上传并保存图片功能
- 浏览器图片\文件上传到服务器 ajaxfileupload.js使用实例
- jsp中上传图片(使用ajaxfileupload)
- 最近使用ajaxFileUpload和Jcrop来实现图片上传和截图,出现一个图片无法更换的问题
- 解决网页异步上传图片时不断更换预览图片时数据库累积文件问题与ajaxUploadFile上传多个参数问题
- $ajaxFileUpload可以带参数文件上传源码及使用
- AjaxFileUpload组件结合Struts2异步图片上传
- AjaxFileUpLoad 文件异步上传Demo(模仿官方网站,后台使用.net一般处理程序)
- ajaxFileUpload图片上传、限制后缀和张数 带参数
- asp.net ajax AjaxFileUpload使用 多文件上传
- springMVC结合ajaxfileupload.js实现图片的上传及时显示
- 使用ajaxFileUpload.js插件实现ajax无刷新上传文件