jquery.Uploadify.js 上传插件

最新推荐文章于 2017-05-27 11:43:00 发布

chuonongsu0821

最新推荐文章于 2017-05-27 11:43:00 发布

阅读量137

点赞数

文章标签： javascript php ui ViewUI

原文链接：https://my.oschina.net/u/2978130/blog/845815

版权

官网

http://www.uploadify.com/download/

中文文档

http://www.mamicode.com/info-detail-506696.html

一、单图上传

1.引入样式，js

2.配置$('#file_upload').uploadify({ })参数。

二、多图上传

原理和单图上传相同，唯一区别是可用onUploadSuccess事件中，ajax生成隐含的value值为图片地址的input标签。

示例代码

前台：html

<html lang="en">
<head>

    <meta charset="utf-8">
    <title>365Kaifa</title>


    <!--图片上传插件-->
    <link rel="stylesheet" type="text/css" href="/feb1/ui/test/tp/Public/assets/js/uploadify/uploadify.css">
    <script src="/feb1/ui/test/tp/Public/assets/js/uploadify/jquery-1.9.1.min.js"></script>
    <script src="/feb1/ui/test/tp/Public/assets/js/uploadify/jquery.uploadify.js"></script>

</head>

<body>

<!-- PAGE CONTENT BEGINS -->
<from id="form1">
    <input type="file" id="file_upload" name="file_upload">
</from>

</body>
</html>

前端：js

<script>
    $(function () {
        <?php $timestamp=time();?>
        $('#file_upload').uploadify({
            'swf': '__PUBLIC__/assets/js/uploadify/uploadify.swf',    //指定上传控件的主体文件
            'uploader': 'upload',   //指定服务器端上传处理文件
            'buttonText': '上传图片',
            //显示的高度和宽度，默认 height 30；width 120
            //'height': 105,
            //'width': 800,
            //上传文件的类型  默认为所有文件    'All Files'  ;  '*.*'
            //在浏览窗口底部的文件类型下拉菜单中显示的文本
            'fileTypeDesc': 'Image Files',
            //允许上传的文件后缀
            'fileTypeExts': '*.gif; *.jpg; *.png',
            //发送给后台的其他参数通过formData指定
            'formData': {
                'timestamp': '<?php echo $timestamp;?>',
                'token': '<?php echo md5('unique_salt' . $timestamp);?>'
            },
            //上传文件页面中，你想要用来作为文件队列的元素的id, 默认为false  自动生成,  不带#
            //'queueID': 'fileQueue',
            //选择文件后自动上传
            'auto': true,
            //设置为true将允许多文件上传
            'multi': true,
            'onInit': function () {
                // alert("1");
            },
            'onSelect': function (img) {
                /* alert(
                        "文件名：" + img.name + "\r\n" +
                        "文件大小：" + img.size + "\r\n" +
                        "创建时间：" + img.creationDate + "\r\n" +
                        "最后修改时间：" + img.modificationDate + "\r\n" +
                        "文件类型：" + img.type
                );
                */

            }, 'onUploadSuccess' : function(file, data, response) {
                var json_data=eval("("+data+")");
                alert(json_data.info);
            }
        })

    });
</script>

后端 php

public function upload()
    {
        $targetFolder = '/uploads'; // Relative to the root

        $verifyToken = md5('unique_salt' . $_POST['timestamp']);//验证token

        if (!empty($_FILES) && $_POST['token'] == $verifyToken) {

            $tempFile = $_FILES['Filedata']['tmp_name'];
            $targetPath = $_SERVER['DOCUMENT_ROOT'] . $targetFolder;

            $code = mb_detect_encoding($_FILES['Filedata']['name'], array("ASCII",'UTF-8','GB2312',"GBK",'BIG5'));//windows下编码为gbk
            if($code=='UTF-8'){
                $_FILES['Filedata']['name']=iconv('UTF-8','gb2312',$_FILES['Filedata']['name']);
            }

            $targetFile = rtrim($targetPath,'/') . '/' . $_FILES['Filedata']['name'];
            // Validate the file type
            $fileTypes = array('jpg','jpeg','gif','png'); // File 扩展名检测
            $fileParts = pathinfo($_FILES['Filedata']['name']);

            if (in_array($fileParts['extension'],$fileTypes)) {
                if(!file_exists($targetPath)){
                    mkdir($targetPath);
                }
                move_uploaded_file($tempFile,$targetFile);
                echo json_encode(array('status'=>1,'info'=>'上传成功'));
            } else {
                echo json_encode(array('status'=>1,'info'=>'服务器不支持该格式图片'));
            }
        }else
            echo json_encode(array('status'=>1,'info'=>'上传失败'));

    }

转载于:https://my.oschina.net/u/2978130/blog/845815

chuonongsu0821

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery.Uploadify.js 上传插件

官网 http://www.uploadify.com/download/ 中文文档 http://www.mamicode.com/info-detail-506696.html 一、单图上传 1.引入样式，js 2.配置$('#file_upload').uploadify({...
复制链接

扫一扫