在php中使用jquery uploadify进行多图片上传

jquery uploadify是一款Ajax风格的批量图片上传插件,在PHP中使用jquery uploadify很方便,请按照本文介绍的方法和步骤,为你的PHP程序增加jquery uploadify插件的批量上传图片功能。

本文是以dilicms为基础,为其增加图片上传功能。

1.增加数据表dili_fieldtypes新字段:k=>image,V=>图片上传区域(VACHAR);

2.修改application/libraries/dili/Field_behavior.php,在switch中增加如下代码:

case ‘image‘:
$field=array(
‘type‘=>‘VARCHAR‘,
‘constraint‘=>255,
‘default‘=>‘ ‘
);
break;

3. 修改 application/libraries/dili/Form.php 并且增加如下代码:

function _image($fileld,$default){
//$type= ‘type=hidden‘;
//$width=($field[‘width‘] ? $field[‘width‘] : ‘570‘) .‘px;‘;
//$height=($field[‘height‘] ? $field[‘height‘] : ‘415‘)  .‘px;‘;
return ;
}

4.在content_form.php和category_content_form.php中增加判断代码:

<?php
    if($v[‘type‘]=="image"):
?>
<div id="fileQueue"></div>
<input type="file" id="uploadify" name="Filedata" />
<div>
<a href="javascript(‘#uploadify‘).uploadify(‘upload‘,‘*‘)">上传</a>
<a href="javascript(‘#uploadify‘).uploadify(‘cancel‘)">取消上传</a>
</div>
<input type="text" style="" name="<?php echo $v[‘name‘]?>" id="<?php echo $v[‘name‘]."_id"?>" value=""/>
<input type="hidden" style="" name="poster" id="<?php echo $v[‘name‘]."_id_1"?>" value=""/>
<link href="<?php echo $this->config->item("base_url");?>asset/js/uploadify/uploadify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="<?php echo $this->config->item("base_url");?>asset/js/uploadify/jquery.uploadify-3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
        $("#uploadify").uploadify({
                ‘debug‘:false,
                ‘swf‘: ‘<?php echo $this->config->item("base_url");?>asset/js/uploadify/uploadify.swf‘,
                ‘uploader‘: ‘<?php echo $this->config->item("base_url");?>photo/savephoto‘,
                ‘method‘:"post",
                ‘height‘:30,
                ‘width‘:120,
                ‘queueID‘: ‘fileQueue‘,
                ‘auto‘: false,
                ‘multi‘: false,
                ‘fileTypeDesc‘:‘只允许上传jpg格式图片‘,
                ‘fileTypeExt‘:‘*.jpg‘,
                ‘fileSizeLimit‘ : ‘10MB‘,
                   ‘formData‘ : { ‘<?php echo session_name();?>‘ : ‘<?php echo $this->session->userdata(‘session_id‘);?>‘ },
                ‘onUploadError‘     : function (file,errorCode,errorMsg,errorString) {
      alert(‘The file ‘ + file.name + ‘ could not be uploaded: ‘ + errorString);
    },
    ‘onUploadSuccess‘:function(file,data,response){
            alert(data);
            $("#<?php echo $v[‘name‘]."_id"?>").val(data);
            $("#<?php echo $v[‘name‘]."_id_1"?>").val(data);
        }
    });
})
</script>
<?php endif;?>

6. 新建photo.php文件:

<?php
if ( ! defined(‘BASEPATH‘)) exit(‘No direct script access allowed‘);
date_default_timezone_set(‘Asia/Shanghai‘);
class Photo extends Front_Controller{
        public function __construct()
        {
                parent::__construct();
        }
                function _getFilePath()
        {
                $path="attachments/".date("Y")."/";
            if(!file_exists($path)){
                    mkdir($path,‘777‘);
            }
            $path.=date("m")."/";
            if(!file_exists($path)){
                    mkdir($path,‘777‘);
            }
            return $path;
        }
        function _creat_photothumbs($FileName,$setW){
                $IMGInfo= getimagesize($FileName);
        if(!$IMGInfo) return false;
        if($IMGInfo[‘mime‘]== "image/pjpeg" || $IMGInfo[‘mime‘]=="image/jpeg"){
            $ThisPhoto= imagecreatefromjpeg($FileName);
        }elseif($IMGInfo[‘mime‘]== "image/x-png" || $IMGInfo[‘mime‘]== "image/png"){
            $ThisPhoto= imagecreatefrompng($FileName);
        }elseif($IMGInfo[‘mime‘]== "image/gif"){
            $ThisPhoto=imagecreatefromgif($FileName);
        }
        $width=$IMGInfo[‘0‘];
        $height=$IMGInfo[‘1‘];
        $scale=$height/$width;
        $nw=$setW;
        $nh=$nw*$scale;
        $NewPhoto=imagecreatetruecolor($nw,$nh);
        imagecopyresampled($NewPhoto,$ThisPhoto,0,0,0,0,$nw,$nh,$width,$height);
        ImageJpeg ($NewPhoto,$FileName);
        return true;
        }
                function _savephoto_post(){
                                        $dest_dir =$this->_getFilePath();
                        if (!empty($_FILES)) {
                        $date = date(‘Ymd‘);
                        //$dest_dir =$this->_getFilePath();
                        $photoname = $_FILES["Filedata"][‘name‘];
                        $phototype = $_FILES[‘Filedata‘][‘type‘];
                        $photosize = $_FILES[‘Filedata‘][‘size‘];
                        $fileInfo=pathinfo($photoname);
                        $extension=$fileInfo[‘extension‘];
                        $newphotoname = date("YmdHis").mt_rand(10000,99999).‘.‘.$extension;
                        $dest=$dest_dir.$newphotoname;
                        //move_uploaded_file($_FILES[‘Filedata‘][‘tmp_name‘], iconv("UTF-8","gb2312",$dest));
                        move_uploaded_file($_FILES[‘Filedata‘][‘tmp_name‘], $dest);
                        //chmod($dest, 0755);
                        //如果宽度大于600则要进行裁剪
                        $arr=getimagesize($dest);
                        if($arr[0]>600){
                                $thumb_w=600;
                            $this->_creat_photothumbs($dest,$thumb_w);
                        }
                        //生成缩略图
                        $config2[‘image_library‘] = ‘gd2‘;
                        $config2[‘source_image‘] = $dest;
                        $config2[‘create_thumb‘] = TRUE;
                        $config2[‘maintain_ratio‘] = TRUE;
                        $config2[‘width‘] = 170;
                        $config2[‘height‘] = 150;
                        $config2[‘master_dim‘]="width";
                        $config2[‘thumb_marker‘]="_1";
                        $this->load->library(‘image_lib‘, $config2);
                        $this->image_lib->resize();
                        echo $dest;
                }
        }
}
?>

好了,可以测试了。

时间: 2024-12-24 09:16:51

在php中使用jquery uploadify进行多图片上传的相关文章

PHP+jQuery+Ajax实现多图片上传介绍

PHP+jQuery+Ajax实现多图片上传介绍: 本文中用到一个Ajax表单提交插件:jqery.form.js,有高人修改了几行代码并改名为:jquery.wallform.js,直接拿来用. 下面就来就来介绍一下这一款功能强大的插件的使用,需要的朋友可以做一下参考. 在不刷新页面的前提下,使用PHP+jQuery+Ajax实现多图片上传的效果.用户只需要点击选择要上传的图片,然后图片自动上传到服务器上并展示在页面上,效果图如下: 一.HTML代码: 在页面上放置一个form表单,使用pos

MVC4中基于bootstrap和HTML5的图片上传Jquery自定义控件

场景:mvc4中上传图片,批量上传,上传前浏览,操作.图片进度条. 解决:自定义jquery控件 没有解决:非图片上传时,会有浏览样式的问题; 解决方案; 1.样式 – bootstrap 的css和图标与metro-ui-css的部分css 2.js 自定义控件 3.后台 mvc4 ------------------------------------------------- 1. [class*=border-color] { border: 2px solid; } .border-c

uploadify struts2实现图片上传

uploadify是来自国外的一款优秀的jQuery上传插件,主要功能是批量上传文件,带进度显示. 包括两个版本,一个是Flash的 一个是HTML5的.下面介绍Flash版本如何使用 1.下载 Uploadify Zip 2.解压缩包并上传下列文件到您的网站上的一个文件夹: jquery.uploadify.min.js uploadify.css uploadify-cancel.png uploadify.swf 3.在您使用uploadify页面也不要忘了引入jQuery库 4.在页面引

Android开发中使用七牛云存储进行图片上传下载

Android开发中的图片存储本来就是比较耗时耗地的事情,而使用第三方的七牛云,便可以很好的解决这些后顾之忧,最近我也是在学习七牛的SDK,将使用过程在这记录下来,方便以后使用. 先说一下七牛云的存储原理,上面这幅图片是官方给出的原理图,表述当然比较清晰了.可以看出,要进行图片上传的话可以分为五大步: 1. 客户端用户登录到APP的账号系统里面: 2. 客户端上传文件之前,需要向业务服务器申请七牛的上传凭证,这个凭证由业务服务器使用七牛提供的服务端SDK生成: 3. 客户端使用七牛提供的客户端S

使用jQuery Uploadify在ASP.NET 上传附件 (转)

Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.Uploadify官方网址:http://www.uploadify.com/,在MVC中使用的方法可以参考 jQuery Uploadify在ASP.NET MVC3中的使用 和 Asp.net Mvc中使用uploadify实现图片缩放保存. 本文是一个简单的介绍Demo,主要是动态传递参数方法:通过formdata 向处理程序传递额外的表单数据: <!DOCTYPE html PUBLIC "-//W3C

基于jQuery仿uploadify的HTML5图片上传控件jquery.html5uploader

(function($){ var methods = { init:function(options){ return this.each(function(){ var $this = $(this); var $clone = $this.clone(); var settings = $.extend({ id : $this.attr('id'), button:$this, uploader : '', formData:{}, auto : true, fileTypes : '*

截取部分字符串中的内容(可做文件上传时的文件重命名)

最近的项目中要使用springmvc做一个图片上传的功能,对于图片上传的文件名的规范命名需要做一个调整,记录一下:

jquery的uploadify插件多文件上传配置参数详解

最近做了个多文件上传,需要限制上传文件类型的例子.以前没做过找了一些资料,下次有用.同时也给大家做参考. uploader: uploadify.swf 文件的相对路径,该swf文件是一个带有文字BROWSE的按钮,点击后淡出打开文件对话框,默认值:uploadify.swf. script: 后台处理程序的相对路径 .默认值:uploadify.php checkScript:用来判断上传选择的文 件在服务器是否存在的后台处理程序的相对路径 fileDataName:设置一个名字,在服务器处理

JQuery Uploadify3.2 + SpringMVC 文件上传

1.引入头文件(jQuery放前面,而且不能有多个JQuery) <script type="text/javascript" src="js/jquery-1.6.2.js"></script> <link rel="stylesheet" type="text/css" href="js/uploadify/uploadify.css"> <script typ