关闭搜索(ESC)
搜索标签:

uploadify插件上传图片视频

2015-04-10 浏览:663 标签: uploadify.js 视频上传

今天为了实现视频上传这个功能,试用了uploadify.js这个jquery插件,具体需要了解的细节问题,在这里详细的罗列一下。

在开始写代码之前,需要先配置一下,往往后面的一系列问题都是因为你没有考虑这些细节的问题。

1:你需要上传何种东西?

这个在代码里可以修改,具体在后台PHP里配置

2:你上传的文件的大小

这个需要修改PHP.ini文件,文件地址在 /etc/php5/php.ini 或者在 /etc/php5/apache2/php.ini 这个主要看你的系统的。我的UBUNTU是在后者。

修改如下的参数:

1.upload_max_filesize :上传的文件的大小,默认为2M,按照你的需求修改

2.memory_limit:默认为8m,我一般用128M

3.post_max_size:POST数据的大小,比如要大于upload_max_filesize。

其他可能还会有一些问题,但是基本这些修改了就没有了。

下面书写代码。

html代码

<div class="showupload">
    <form>
        <div id="queue"></div>
        <input id="file_upload" name="file_upload" type="file" multiple="true">
    </form>
</div>

js代码

<?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',
                'onUploadSuccess' : function(file, data, response) {
                    alert('The file ' + file.name + ' was successfully uploaded with a response of ' + response + ':' + data);
                },
                'onUploadError' : function(file, errorCode, errorMsg) {
                    alert('The file ' + file.name + ' has the error of ' + errorMsg + 'width the errorCode ' + errorCode);
                }
            });
        });

php代码


<?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 = '/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'] .'uploadify'. $targetFolder;
    $targetFile = rtrim($targetPath,'/') . '/' . $_FILES['Filedata']['name'];
    // Validate the file type
    $fileTypes = array('jpg','jpeg','gif','png','wmv','avi','asf','asx','rm','rmvb','mpg','mov','mp4','flv'); // File extensions
    $fileParts = pathinfo($_FILES['Filedata']['name']);
    if (in_array($fileParts['extension'],$fileTypes)) {
        move_uploaded_file($tempFile,$targetFile);
        echo '1';
    } else {
        echo 'Invalid file type.';
    }
}
?>

关键

这边最需要关注的问题是图片地址的问题,和上传文件地址,后台代码是本地地址的,比如www.tecclass.cn/uploadify/,现在这个$_SERVER['DOCUMENT_ROOT'],就是www.tecclass.cn,你任然还是需要添加uploadify。还有一个图片叫做uploadify-cancel.png,在css里的地址是img/uploadify-cancel.png,所以你需要新建一个img文件夹。

总结

其他还有什么问题,发邮件到 1225733380@qq.com , code wins arguments, let’s do better together.

添加评论