Yii+upload实现AJAX上传图片的方法

本文实例讲述了Yii+upload实现AJAX上传图片的方法。分享给大家供大家参考,具体如下:

控制器代码:

/**
* get ajax uploaded files.
*/
public function actionGetAjax(){
    $model=new Attachment();//加载附件模型
    $tmpFile  = CUploadedFile::getInstanceByName('image');//读取图像上传域,并使用系统上传组件上传
    $Directroy = Yii::app()->params['uploadPath'];//读取上传配置文件,我的配置是/uploads
    //创建文件存放路径
    $y     = date('Y');
    $m     = date('m');
    $d     = date('d');
    $Directroy = $Directroy."/";
    $pathd = $Directroy.$y."/".$m."/".$d."/";
    Tool::makedir(dirname(Yii::app()->BasePath).$pathd); //创建文件夹,此处一定要加上dirname(Yii::app()->BasePath)不然可能会出错;
    if(is_object($tmpFile) && get_class($tmpFile)==='CUploadedFile'){
      $filename        = time().rand(0,9);
      $ext          = $tmpFile->extensionName;//上传文件的扩展名
      if($ext=='jpg'||$ext=='gif'||$ext=='png'){
          $big          = $pathd . $filename . '_600.' . $ext; //310缩略图
        $small         = $pathd . $filename . '_310.' . $ext; //310缩略图
        $thumb         = $pathd . $filename . '_100.' . $ext; //100缩略图
        $model->zat_thumb    = $thumb; //缩略图
      }
      $uploadfile       = $pathd . $filename . '.' . $ext;   //保存的路径
      $model->zat_url     = $pathd . $filename . '.' . $ext;   //重新赋值
      $model->zat_file_name  = $filename . '.' . $ext;        //文件名称
      $model->zat_title    = $tmpFile->name;            //文件标题
      $model->zat_file_type  = $tmpFile->type;            //文件类型
      $model->zat_file_size  = $tmpFile->size;            //文件大小
      $model->zat_image    = 2;
      $model->zat_ip     = Yii::app()->request->userHostAddress; //上传IP
      //print_r($uploadfile);
    }
    if($model->save()){
      $tmpFile->saveAs(dirname(Yii::app()->BasePath).$uploadfile);//保存到服务器
      if($ext=='jpg'||$ext=='gif'||$ext=='png'){
        $img = Yii::app()->image->load(dirname(Yii::app()->BasePath).$uploadfile); //使用image-Kohana图像处理库扩展
        $img->resize(600,600)->quality(85);
        $img->save(dirname(Yii::app()->BasePath).$big);//生成600缩略图
        $img->resize(310,310)->quality(85);
        $img->save(dirname(Yii::app()->BasePath).$small);//生成310缩略图
        $img->resize(100,100)->quality(85);
        $img->save(dirname(Yii::app()->BasePath).$thumb);//生成100缩略图
      }
      if($ext=='jpg'||$ext=='gif'||$ext=='png'){
        $str = json_encode(
          array(
            'upfile'=>array(
              'zat_id' => Yii::app()->db->getLastInsertID(), //取插ID
              'file' => $uploadfile,//原图
              'small' => $small,//310缩略图
              'thumb' => $thumb,//100缩略图
            )
          )
        );
      }else{
        $str = json_encode(
          array(
            'upfile'=>array(
              'zat_id' => Yii::app()->db->getLastInsertID(),
              'file' => $uploadfile,
            )
          )
        );
      }
      echo $str;
    }
}

VIEW代码:

<input id="fileupload" type="file" name="image" multiple>
<script src="<?php echo Yii::app()->baseUrl;?>/js/jquery.ui.widget.js"></script>
<script src="<?php echo Yii::app()->baseUrl;?>/js/jquery.iframe-transport.js"></script>
<script src="<?php echo Yii::app()->baseUrl;?>/js/jquery.fileupload.js"></script>
<script>
$(function () {
  $('#fileupload').fileupload({
    dataType: 'json',
    url: '/Attachment/GetAjax',
    success: function (json) {
        $('#MemType_zmt_pic').attr('value',json.upfile.file);
        $("#images").attr('src',json.upfile.file);
    }
  });
});
</script>

更多关于Yii相关内容感兴趣的读者可查看本站专题:《Yii框架入门及常用技巧总结》、《php优秀开发框架总结》、《smarty模板入门基础教程》、《PHP+ajax技巧与应用小结》、《php面向对象程序设计入门教程》、《php字符串(string)用法总结》、《php+mysql数据库操作入门教程》及《php常见数据库操作技巧汇总》

希望本文所述对大家基于Yii框架的PHP程序设计有所帮助。

时间: 2016-07-11

yii实现图片上传及缩略图生成的方法

本文实例讲述了利用yii框架来实现图片上传功能并在上传成功之后自动生成缩略图的方法,分享给大家供大家参考.具体实现方法如下: Action文件: 复制代码 代码如下: <?php /**  * TestController.php  * Created on: 2014-1-26 12:59:36 by Outsider  */ class TestController extends CController {       /**      * 缩略图片生成      * @ path 图片路

yii2整合百度编辑器umeditor及umeditor图片上传问题的解决办法

我们接下来就来聊聊Yii2框架是如何整合百度编辑器umeditor的. umeditor是啥,我只听过ueditor,你这umeditor是不是盗版的东东喃?umeditor呢,说白了就是mini版的ueditor,按照百度官方说法,其实就是编辑器中的"短软小",但是功能俱全.咳咳,咱们回归正题. 首先勒,咱们先去官网下载一份mini版的ueditor umeditor,注意哦,是um editor. 下载下来解压放到项目根目录下面的 /css目录下 命名为umeditor,具体位置各

Yii框架实现图片上传的方法详解

本文实例讲述了Yii框架实现图片上传的方法.分享给大家供大家参考,具体如下: 今天在网上看了下有关图片上传的教程,历经挫折才调试好,现在把相关代码及其说明贴出来,以供初次使用的朋友们参考. Model: <?php class Upload extends CActiveRecord { public $image; public static function model($className = __CLASS__) { return $className; } public functio

Yii框架上传图片用法总结

本文实例讲述了Yii框架上传图片用法.分享给大家供大家参考,具体如下: Yii 提供了 CUploadedFile 来上传文件,比如图片,或者文档. 官方关于这个类的介绍 : CUploadedFile represents the information for an uploaded file. Call getInstance to retrieve the instance of an uploaded file, and then use saveAs to save it on th

yii上传文件或图片实例

1.test.php 复制代码 代码如下: <body><form action="<?php echo $this->createUrl('/test/upload/');?>" method="post" enctype="multipart/form-data"><input type="file" name="file"/><input t

yii2利用自带UploadedFile实现上传图片的示例

本人搜索了很多关于yii2利用自带UploadedFile实现上传图片介绍,下面我来记录一下. 创建一个 models/UploadForm.php: namespace app\models; use yii\base\Model; use yii\web\UploadedFile; /** * UploadForm is the model behind the upload form. */ class UploadForm extends Model { /** * @var Uploa

Yii2实现ajax上传图片插件用法

本文实例讲述了Yii2实现ajax上传图片插件用法.分享给大家供大家参考,具体如下: 这里需要先下载 mdmsoft/yii2-upload-file.插件. 代码如下: public function actionCreate() { $model = new DynamicModel([ 'nama', 'file_id' ]); // behavior untuk upload file $model->attachBehavior('upload', [ 'class' => 'mdm

yii2高级应用之自定义组件实现全局使用图片上传功能的方法

本文讲述了yii2高级应用之自定义组件实现全局使用图片上传功能的方法.分享给大家供大家参考,具体如下: 此例为yii2高组应用,这里只提供一个简单的事例 在yii2中,在使用到上传图片时有自带的一个上传图片类,但不太好用. 其中有一种方式,把自己写的一个上传图片类文件,注册成一个组件,在全局中使用.(我记得我在里面有写过一篇小物件的使用) 这里,我只作一个简单的自定义组件介绍 1.在backend(或frontend)定义一个 upload.php(注意路径: backend/component

YII中Ueditor富文本编辑器文件和图片上传的配置图文教程

将Ueditor集成到YII框架中后,参照editor_config.js中的toolbars中的内容,更改options中标签可以给编辑器添加想要的功能: 因此要想添加文件和图片上传功能,应该加入以下两个标签: 文本编辑器中便出现了对应的两个选项: 但是点击上传图片按钮后发现,无法正常进行图片上传,文件上传也是失败的,问题都是Flash Player需要升级, 因此在火狐浏览器中安装对应的flash player组件,选择其中一个工作: 此时,文件上传和图片上传功能就能正常使用了: 上传路径的

Yii结合CKEditor实现图片上传功能

这几天做的一个项目中需要在所见即所得编辑器中实现图片上传的功能,我因为比较喜欢CKEditor的界面而选择了它.虽然有跟CKEditor配合良好的CKFinder,不过这个东东的功能太复杂,简单看了下CKEdtior的文档,发现这个功能还是可以自己实现而不用借助CKFinder的. 下面代码虽然基于Yii Framework的,但是用其他框架或者语言思路却是完全一样的,有需要的童鞋可以参考一下. 首先要让CkEditor出现图片上传的功能,需要配置编辑器的filebrowserImageUplo

yii使用activeFileField控件实现上传文件与图片的方法

本文实例讲述了yii使用activeFileField控件实现上传文件与图片的方法.分享给大家供大家参考,具体如下: yii框架提供了activeFileField控件来完成上传文件(当然也包括了上传图片)的操作,下面介绍yii的activeFileField使用方法. 1.函数原型: 复制代码 代码如下: public static string activeFileField(CModel $model, string $attribute, array $htmlOptions=array

JS中使用FormData上传文件、图片的方法

关于FormData XMLHttpRequest Level 2添加了一个新的接口  ---- FormData 利用FormData对象,可以通过js用一些键值对来模拟一系列表单控件,可以使用XMLHttpRequest的 send( ) 方法来异步提交表单与普通的ajax相比,使用FormData的最大优点就是可以异步上传二进制文件 FormData对象 FormData对象,可以把所有表单元素的name与value组成一个queryString,提交到后台. 在使用ajax提交时,使用F

php使用curl模拟浏览器表单上传文件或者图片的方法

前言 在浏览器使用html中的input框我们可以实现文件的上传,表单元素选用 <input type="file"> 控件,form 表单需要设置 enctype="multipart/form-data" 属性.比如: <body> <form action="UploadFile.php" method="post" enctype="multipart/form-data&quo

file控件选择上传文件确定后触发的js事件是哪个

一直以来纠结于这个问题.今天闲来上网搜索了一下这个问题.终于知道答案.是onchange事件.经过本人测试,可用.还有说onpropertychange也可以.经chrome浏览器测试,无效果.不知道是什么原因.

C#采用HttpWebRequest实现保持会话上传文件到HTTP的方法

本文实例讲述了C#采用HttpWebRequest实现保持会话上传文件到HTTP的方法,在项目开发中有一定的实用价值,具体方法如下: 一.前言: 这篇文章翻译来自madmik3 写在 CodeProject 上的文章,原标题为: C#'s WebClient.UploadFile with more functionality. 二.正文: 我们使用 WebRequest 来获取网页内容是非常简单的,可是用他来上传文件就没有那么简单了. 如果我们在网页中上传文件,加入下面代码即可: HTML 文

php+ajax实现异步上传文件或图片功能

本文为大家分享了ajax异步上传文件或图片功能的具体代码,供大家参考,具体内容如下 //html代码 <form enctype="multipart/form-data" id="upForm"> <input type="file" name="file" ><br><br> <input type="button" value="提交&q

TP3.2批量上传文件或图片 同名冲突问题的解决方法

本文实例为大家分享了TP3.2批量上传文件或图片的具体代码,并解决了同名冲突问题,供大家参考,具体内容如下 1.html <form action="{:U('Upload/index')}" enctype="multipart/form-data" method="post" > <p><input type="file" id="file3" name="ID[

C#检测上传文件真正类型的方法

本文实例讲述了C#检测上传文件真正类型的方法.分享给大家供大家参考.具体分析如下: 对于用户上传的文件如果只是根据扩展名判断,很容易上传上来可执行文件,这是非常危险的,这段代码可以在服务器端检测上传文件的真实类型. <%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xh

SpringMVC上传文件的两种方法

在该示例中,阐述了SpringMVC如何上传文件. 1.上传页面upload.jsp <body> <form action="/TestSpringMVC3/data/uploadfile" enctype="multipart/form-data" method="post"> file:<input type="file" name="file"><br>

Angular2里获取(input file)上传文件的内容的方法

最近在用Angular2,需要有一个上传文件的功能,但是又不想用库,所以直接用原生的input file 标签. <input type="file" id="newUpload" > 然后想获取上传的内容,于是先想了个愚蠢的方法,先通过id获取到这个input标签,然后再获取其中上传的内容 const uploadsFile = document.getElementById(name).files[0]; 结果就报错了.然后看提示说HTMLEleme