jQuery.uploadify-----文件上傳帶進度條，支持多文件上傳的插件

時間 2019-11-10

標籤 jquery.uploadify jquery uploadify 文件上傳帶進支持插件欄目 JQuery 简体版

原文原文鏈接

借鑑別人總結的uploadify：基於jquery的文件上傳插件，支持ajax無刷新上傳，多個文件同時上傳，上傳進行進度顯示，控制文件上傳大小，刪除已上傳文件。javascript

uploadify有兩個版本，一個用flash,一個是html5。html5的須要付費~因此這裏只說flash版本的用法。php

uploadify官網地址：http://www.uploadify.com/html

上傳文件截圖：html5

uploadify文檔:http://www.uploadify.com/documentation/,在這兒能夠查看uploadify的Options,Events,Methods，點擊下面的各個內容能夠看到demo代碼。java

若是英文很差，能夠查找別人已經翻譯過，解釋過的文章（也許更詳細，我找到的一個：http://blog.csdn.net/superdog007/article/details/17242947）jquery

下載地址：http://www.uploadify.com/download/（demo使用的是php語言）ajax

下載的文件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中）代碼：spa

<?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 '無效的文件類型。';
    }
}
?>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。