ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法

本文实例讲述了ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法。分享给大家供大家参考。具体实现方法分析如下:

首先,AjaxFileUploader插件是一个基于jquery的插件,我们可以使用AjaxFileUploader插件来实现文件异步上传功能了,使用这款插件上传文件不要担心兼容性的问题,它的兼容性可以说兼容所有主流浏览器,下面来给大家介绍一个AjaxFileUploader+thinkphp实现文件上传的实例。

ThinkPHP框架下用AjaxFileUploader插件实现ajax文件上传,支持多种文件格式,页面无刷新上传。

在Lib/Action/目录下创建upAction.class.php文件,代码如下:

代码如下:

<?php
class upAction extends BaseAction{
public function index(){
    $this->display();
}
 
/*
*@文件上传
*@author    FineYi
*@date        2013-01-23
*/
public function upLoadFile(){
    $error = "";
    $msg = "";
    $fileElementName = 'fileToUpload';
    if(!empty($_FILES[$fileElementName]['error'])){
        switch($_FILES[$fileElementName]['error']){
            case '1':
                $error = 'The uploaded file exceeds the upload_max_filesize directive in php.ini';
                break;
            case '2':
                $error = 'The uploaded file exceeds the MAX_FILE_SIZE directive that was specified in the HTML form';
                break;
            case '3':
                $error = 'The uploaded file was only partially uploaded';
                break;
            case '4':
                $error = 'No file was uploaded.';
                break;
 
            case '6':
                $error = 'Missing a temporary folder';
                break;
            case '7':
                $error = 'Failed to write file to disk';
                break;
            case '8':
                $error = 'File upload stopped by extension';
                break;
            case '999':
            default:
                $error = 'No error code avaiable';
        }
    }elseif(empty($_FILES['fileToUpload']['tmp_name']) || $_FILES['fileToUpload']['tmp_name'] == 'none'){
        $error = 'No file was uploaded..';
    }else{
            $re = $this->up();
            if(!$re){
                $error = 'Up file fail';
            }
            $msg = $re['savename'];    //文件名
            $path = '/upload/bizcoop/'.$msg;    //文件路径
            $size = $re['size'];    //文件大小
    }       
    echo json_encode(array('error'=>$error,'msg'=>$msg,'path'=>$path,'size'=>$size));exit;
}
 
private function up(){
    import('@.Org.UploadFile');//将上传类UploadFile.class.php拷到Lib/Org文件夹下
    $upload=new UploadFile();
 
    $upload->maxSize='-1';//默认为-1,不限制上传大小
    $upload->savePath= ICTSPACE_DIST_ROOT_PATH.'/www/upload/bizcoop/';//保存路径
    $upload->saveRule=uniqid;//上传文件的文件名保存规则
    $upload->uploadReplace=true;//如果存在同名文件是否进行覆盖
    $upload->allowExts=array('jpg','jpeg','png','gif');//准许上传的文件类型
    if($upload->upload()){
        $info=$upload->getUploadFileInfo();
        return $info[0];
    }else{
        return false;
        exit;
    }
}
}
?>

在/Tpl/default/Up/目录下创建index.tpl文件,代码如下:

代码如下:

<div id="content">
<h1>Ajax File Upload Demo</h1>
<img id="loading" style="display: none;" alt="" src="__APP____PUBLIC__/style/img/loading.gif" />
 
<form action="" enctype="multipart/form-data" method="POST" name="form">
<table class="tableForm" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><input class="input" id="fileToUpload" type="file" name="fileToUpload" size="45" /></td>
</tr>
<tr>
<td><button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">Upload</button></td>
</tr>
</tbody>
<tbody>
<tr>
<td><span>已上传的附件:</span></td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
</form></div>

在/Lib/Org/目录下放入ThinkPHP文件上传类就可以了,有一些插件我们需要到官方下载。

希望本文所述对大家的PHP程序设计有所帮助。

时间: 2014-10-26

thinkPHP5框架整合plupload实现图片批量上传功能的方法

本文实例讲述了thinkPHP5框架整合plupload实现图片批量上传功能的方法.分享给大家供大家参考,具体如下: 在官网下载plupload http://http//www.plupload.com 或者点击此处本站下载. 这里我们使用的是pluploadQueue 在HTML页面引入相应的css和js,然后根据示例代码修改为自己的代码 <link rel="stylesheet" href="/assets/plupupload/css/jquery.plupl

封装ThinkPHP的一个文件上传方法实例

本文实例讲述了封装ThinkPHP的一个文件上传方法,分享给大家供大家参考.具体如下: 这阵子,对WBlog的上传功能作了优化.改进后的上传功能可以实现缩略图上传,图片上传,生成水印,文件上传,并且可以在后台对上传的附件进行大小(文件大小),类型(文件类型),水印(针对图片)的进行设置.此外还可以对上传的文件进行分类保存到相应的文件夹里,方便管理. 下面是对改进后的上传功能作简约的说明. 缩略图上传 先前的缩略图上传功能使用了KindEditor的上传组件,除非上传之前对图片进行缩略处理,不然上

yii2.0使用Plupload实现带缩放功能的多图上传

本文讲解了plupload的相关代码,实现了ajax多图同时上传,然后将图片进行缩放,最后显示图片,分享给大家供大家参考,具体内容如下 1.文章视图中调用Plupload <?= \common\widgets\Plupload::widget([ 'model'=>$model, 'attribute'=>'cover_img', 'url'=>'/file/upload',//处理文件上传控制器 ])?> 2.\common\widgets\Plupload 组件 <

PHP + plupload.js实现多图上传并显示进度条加删除实例代码

PHP + plupload.js JS插件实现多图上传并显示进度条加删除实例,废话不多说,直接上代码 HTML代码: <!DOCTYPE html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no&qu

thinkphp jquery实现图片上传和预览效果

先上效果图: 那个file按钮样式先忽略 点击选择图片(浏览),随便选一张图片 js代码如下 //上传图片立即预览 function PreviewImage(imgFile) { var filextension = imgFile.value.substring(imgFile.value .lastIndexOf("."), imgFile.value.length); filextension = filextension.toLowerCase(); if ((filexte

ThinkPHP文件上传实例教程

文件上传是很多PHP程序项目中常见的一个功能,今天本文就来分享一个完整的实例,来实现ThinkPHP文件上传的功能.具体方法如下: 一.action部分: FileAction.class.php页面代码如下: <?php class FileAction extends Action{ function index(){ $file=M('file'); $list=$file->select(); $this->assign('filelist',$list); $this->

Thinkphp多文件上传实现方法

本文实例讲述了Thinkphp多文件上传实现方法,分享给大家供大家参考.具体实现方法如下: Thinkphp手册中对于多文件上传描述的很清楚:如果需要使用多个文件,只需要修改表单,把 复制代码 代码如下: <input type='file' name='photo'> 改为 复制代码 代码如下: <li><input type='file' name='photo1'></li> <li><input type='file' name='

使用JS+plupload直接批量上传图片到又拍云

论坛或者贴吧经常会需要分享很多图片,上传图片比较差的做法是上传到中央服务器上,中央服务器再转发给静态图片服务器.而这篇文章讲介绍如何使用plupload对上传过程进行优化,并绕过服务器直接批量上传图片到又拍云上的方法.本文集中会讲到以下几个重点: 复制代码 代码如下: plupload库 图片的本地压缩 多选图片 绕过服务器直接批量上传图片到又拍云 使用又拍的HTTP FORM API plupload的配置 plupload库 plupload是一个支持非常丰富的图片上传插件.可以对低版本的浏

基于ThinkPHP5.0实现图片上传插件

效果预览图: 该插件主要功能是:可预览裁剪图片和保存原图片,执行裁剪图片后会删除 裁剪的原图片目录,以便减少空间. 一.下载附件 地址:链接: https://pan.baidu.com/s/1nuQ4NgP  密码: 4pbu 二.将附件中的CropAvatar.php放到自己程序目录extend/org目录下,如果遇到 exif_imagetype 错误,需要打开 php.ini 中的 extension=php_exif.dll 三.common.php公共函数 找到应用程序目录下的com

thinkPHP3.2简单实现文件上传的方法

本文实例讲述了thinkPHP3.2简单实现文件上传的方法.分享给大家供大家参考,具体如下: IndexController.class.php: <?php namespace Home\Controller; use Think\Controller; class IndexController extends Controller { function index(){ $this->display(); } public function upload(){ $upload = new

thinkphp实现图片上传功能分享

1.我们首先需要创建一个表 复制代码 代码如下: CREATE TABLE IF NOT EXISTS `tp_image` (  `id` int(11) NOT NULL AUTO_INCREMENT,  `image` varchar(200) NOT NULL,  `create_time` int(11) NOT NULL,  PRIMARY KEY (`id`)) ENGINE=MyISAM  DEFAULT CHARSET=utf8; 2.然后再conf文件里添加配置(最后一段配置

ThinkPHP框架实现FTP图片上传功能示例

本文实例讲述了ThinkPHP框架实现FTP图片上传功能.分享给大家供大家参考,具体如下: 背景: 图片上传功能应该是个极为普遍的,在此参考了ThinkPHP 框架中的集成方法整理了一下FTP图片的上传功能,这样方便在后台操作时,把有关的图片直接上传到线上的图片服务器,避免大流量访问的图片加载缓慢,降低网站的访问压力,不合理之处,敬请指摘... 操作: 1.前端设计 这里主要为了测试功能的实现,使用最简单的设计,既方便参考又有利于后期的功能扩展.如下附upload.html主要代码,着重注意红框

ThinkPHP实现图片上传操作的方法详解

本文实例讲述了ThinkPHP实现图片上传操作的方法.分享给大家供大家参考,具体如下: 直接上个例子,其中包括有单图片文件上传.多图片文件上传.以及删除文件的一些操作.放置删除数据库的时候,仅仅删除掉了数据库之中的文件路径.而不是一并删除服务器之中的文件.放置服务器爆炸.. TP里面common文件夹里面function.php里面自定义方法: <?php //文件上传类(可以设置多个参数) function upload($file=null,$maxSize=0,$exts=0,$saveP

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

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

Summernote实现图片上传功能的简单方法

还是接着之前说过的最近在写一个BootStrap网页....然后要用富文本编辑器,随便搜了下就选了这货 然后发现了很尴尬的问题...图片上传功能无效....然后各种搜索各种无果...最后怒翻Summernote官方文档总算解决了,总之写下解决过程 后端部分就不提供代码了,满大街都是,这里假设后端拿到上传文件后返回文件的地址 首先附上参考资料:Summernote官方开发文档 简单说下Summernote的图片上传功能实现方案 首先根据官方文档提供的API,挂接文件上传事件,然后自己用JS重新上传

thinkphp实现图片上传功能

关于图片上传,实现方法很多,比如可以用jQuery,当然,我们的thinkPHP内置了关于图片上传的功能,我们可以直接使用,使用方法如下: 首先,是表单书写,我们建立如下表单: <form action="__URL__/addChk" method="post" enctype="multipart/form-data"> <table cellspacing="1" cellpadding="2

ReactNative实现图片上传功能的示例代码

最近在学习ReactNative,ReactNative可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App,今天就学习一下ReactNative实现图片上传功能 在查看ReactNative的官方文档的时候,你会发现其实Fackbook是没有提供图片上传功能的. 如果我们的项目里需要使用图片上传(用js 实现图片上传),那我们有没有什么办法呢? 通过搜索React-native的github, 会发现里面有这么一篇文章:https://github

Android中使用GridView实现仿微信图片上传功能(附源代码)

由于工作要求最近在使用GridView完成图片的批量上传功能,我的例子当中包含仿微信图片上传.拍照.本地选择.相片裁剪等功能,如果有需要的朋友可以看一下,希望我的实际经验能对您有所帮助. 直接上图,下面的图片就是点击"加号"后弹出的对话框,通过对话框可以根据自己需求进行相片选择. 项目结构: 下面直接上代码. 整体的布局文件activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/

Laravel+Layer实现图片上传功能(整理篇)

♩ 背景 昨天在自己的 Laravel5.5 框架项目中,希望集成 Layer 的图片上传功能 但是在 ajax(POST) 提交请求时,一直显示 500 报错 ♪ 分析 ⒈ 问题所在 最后将核心代码摘出,放到 Larvel 框架以外运行,发现代码是没有问题的,因为对 Laravel 框架接触的太浅,忽视了 CSRF 的限制 ⒉ 解决方案 一般在表单提交时,都会存放一个隐藏的输入框 <input type="hidden" name="_token" valu

Thinkphp5+plupload实现的图片上传功能示例【支持实时预览】

本文实例讲述了Thinkphp5+plupload实现支持实时预览的图片上传功能.分享给大家供大家参考,具体如下: 今天和大家分享一个国外的图片上传插件,这个插件支持分片上传大文件.其中著名的七牛云平台的jssdk就使用了puupload插件,可见这个插件还是相当牛叉的. 这个插件不仅仅支持图片上传,还支持大多数文件的上传,例如视频文件,音频文件,word文件等等,而且大文件都采用分片上传的机制. Plupload有以下功能和特点: 1.拥有多种上传方式:HTML5.flash.silverli