tp5实操uploadify插件上传图片

基于tp5框架用uploadify插件实现异步上传图片,总结下今天下午的学习。整个上传部分分为几个部分。

一、刚开始当然是下载uploadify插件啦!

官网地址:http://www.uploadify.com/ 国内没被墙但是打开速度很慢(打个广告,有想合租ss的吗,一个月才7块钱,速度流程youtube 4k!)

二、引用jquery库,uploadify脚本,uploadify样式表

{load href="__STATIC__/admin/hui/lib/jquery/1.9.1/jquery.min.js" /}
{load href="__STATIC__/admin/uploadify/jquery.uploadify.min.js" /}
{load href="__STATIC__/admin/uploadify/uploadify.css" /}

以上三个文件都是必须加载的哈!加载路径视自己实际情况而定。
另外加载了image.js 在此js中进行图片上传操作

{load href="__STATIC__/admin/js/image.js" /}

三、声明一个html上传控件

<input id="file_upload" type="file" multiple="true" >

四、将声明的上传控件与image.js中的上传部分进行绑定

$(function() {
    $("#file_upload").uploadify({
        'swf'             : SCOPE.uploadify_swf,
        'uploader'        : SCOPE.image_upload,
        'buttonText'      : "图片上传",
        'fileTypeDesc'    : 'Image files',
        'fileObjName'     : 'file',
        'fileTypeExts'    : '*.gif; *.jpg; *.png',
        'onUploadSuccess' : function(file, data, response) {
            alert('The file ' + file.name + ' was successfully uploaded with a response of ' + response + ':' + data);
        }
    });
});

这段JS需要理解uploadify插件给出的 属性 事件 方法 三个定义。
具体可看这篇文章:https://www.hongxuelin.com/php/174.html
在这个js中我用id选择器选中之前声明的html上传控件,
swf属性设置swf文件的路径,
uploader 处理上传文件脚本的文件方法路径,这里我是在Image.php这个控制器Controller下的upload方法下进行操作的
buttonText指前端展示的上传按钮上的文字例如:
20170417170544.png
其他就不赘述了看上面那篇文章里有解释。

五、Image控制器下的upload方法进行上传!

<?php

namespace app\api\controller;

use think\Controller;
use think\Request;
use think\File;

class Image extends Controller
{
    public function upload(){
        $file = Request::instance()->file('file');
        //给一个图片保存在服务器的路径
        $info = $file->move('upload');
        //如果有info对象并且图片上传成功路径存在
        if($info && $info->getPathname()){
            return 这里返回成功和图片路径;
        }
    }
}

至此 上传就已经成功了,后面的业务逻辑就看个人了!根据官方给出的事件编写业务逻辑达到想要的目的。

已有 3 条评论
  1. ljp ljp

    你好我按照你的方法网页并没有错所有的js和css都加载成功了但是就是没有对组建进行渲染

  2. 小武 小武

    images.js是空文件吗?

    1. images.js是自写的js文件,里面写上传相关的js然后调用

添加新评论