zoukankan      html  css  js  c++  java
  • jQuery.uploadify-----文件上传带进度条,支持多文件上传的插件

    借鉴别人总结的uploadify:基于jquery的文件上传插件,支持ajax无刷新上传,多个文件同时上传,上传进行进度显示,控制文件上传大小,删除已上传文件。

    uploadify有两个版本,一个用flash,一个是html5。html5的需要付费~所以这里只说flash版本的用法。

    uploadify官网地址:http://www.uploadify.com/

    上传文件截图:

    uploadify文档:http://www.uploadify.com/documentation/,在这儿可以查看uploadify的Options,Events,Methods,点击下面的各个内容可以看到demo代码。

    如果英文不好,可以查找别人已经翻译过,解释过的文章(也许更详细,我找到的一个:http://blog.csdn.net/superdog007/article/details/17242947)

    下载地址:http://www.uploadify.com/download/(demo使用的是php语言)

    下载的文件index.php,自己修改以后的代码:

    <body>
        <h1>Uploadify Demo</h1>
        <form>
            <div id="queue"></div>
            <input id="file_upload" name="file_upload" type="file" multiple="true">
        </form>
    
        <script type="text/javascript">
            <?php $timestamp = time();?>
            $(function() {
                $('#file_upload').uploadify({
                    'formData'     : {
                        'timestamp' : '<?php echo $timestamp;?>',
                        'token'     : '<?php echo md5('unique_salt' . $timestamp);?>'
                    },
                    'swf'      : 'uploadify.swf',
                    'uploader' : 'uploadify.php',
                    'buttonText'  : '选择文件', //按钮显示的字迹
                    //'folder'   : 'uploads',//服务端的上传目录
                    'fileObjName':'Filedata',//设置在后台脚本使用的文件名。举个例子,在php中,如果这个选项设置为'the_files',你可以使用$_FILES['the_files']存取这个已经上传的文件。
                     'fileSizeLimit':'100KB',
                    //设置上传文件的容量最大值。这个值可以是一个数字或者字符串。如果是字符串,接受一个单位(B,KB,MB,GB)。如果是数字则默认单位为KB。设置为0时表示不限制
                     'fileTypeExts':'*.gif; *.jpg; *.png',
                    //设置允许上传的文件扩展名(也就是文件类型)。但手动键入文件名可以绕过这种级别的安全检查,所以你应该始终在服务端中检查文件类型。输入多个扩展名时用分号隔开('*.jpg;*.png;*.gif')
                        'multi': false,
                    //设置是否允许一次选择多个文件,true为允许,false不允许
                    
                    'onUploadSuccess':function(file, data, response) { //文件上传成功的时候
                        $("#filename").attr("value",file.name);
                        //$("#filename").val()=file.name;
                       alert(data);
                     },
                    'onUploadError' : function(file, errorCode, errorMsg, errorString) {//文件上传失败的时候
                     alert(file.name + '上传失败原因:' + errorString); 
                     }
               });
            });
        </script>
        <input type="text" name="filename" id="filename"/>
    </body>

    uploadify.php文件修改(记得创建文件夹uploads,我是创建到了解压的文件uploadify中)代码:

    <?php
    /*
    Uploadify
    Copyright (c) 2012 Reactive Apps, Ronnie Garcia
    Released under the MIT License <http://www.opensource.org/licenses/mit-license.php> 
    */
    
    // Define a destination
    $targetFolder = 'uploadify/uploads'; // Relative to the root
    
    $verifyToken = md5('unique_salt' . $_POST['timestamp']);
    
    if (!empty($_FILES) && $_POST['token'] == $verifyToken) {
        $tempFile = $_FILES['Filedata']['tmp_name'];
        $targetPath = $_SERVER['DOCUMENT_ROOT'] . $targetFolder;
        $targetFile = rtrim($targetPath,'/') . '/' . $_FILES['Filedata']['name'];
        // Validate the file type
        $fileTypes = array('jpg','jpeg','gif','png'); // File extensions
        $fileParts = pathinfo($_FILES['Filedata']['name']);
        
        if (in_array($fileParts['extension'],$fileTypes)) {
            move_uploaded_file($tempFile,$targetFile);
            echo '1';
        } else {
            echo '无效的文件类型。';
        }
    }
    ?>
  • 相关阅读:
    js中map和普通对象性能差距有多大?
    谈一谈在css中的wrapper
    react-loadable简单实现
    setstate源码分析
    react setstate()的秘密
    java io学习笔记二
    java8下 枚举 通用方法
    SLF4J、Log4J使用记录
    ByteBuffer flip描述
    unique within an element
  • 原文地址:https://www.cnblogs.com/Ann-wxp/p/4347725.html
Copyright © 2011-2022 走看看