The Fei's Tech Notes: Blueimp Jquery Upload File Plugin

Change upload folder

<?php

* jQuery File Upload Plugin PHP Example 5.14

* https://github.com/blueimp/jQuery-File-Upload

* https://blueimp.net

* Licensed under the MIT license:

* http://www.opensource.org/licenses/MIT

define('DIR_DOWNLOAD', $_SERVER['DOCUMENT_ROOT'].'/');

define ('HTTP_SERVER' , 'http://'.$_SERVER['HTTP_HOST']);

error_reporting(E_ALL | E_STRICT);

require('UploadHandler.php');

$session_folder='aniu';

$upload_handler = new UploadHandler(array(

'upload_dir' => DIR_DOWNLOAD . 'userprofiles/',

'upload_url' => HTTP_SERVER . '/userprofiles/',

'image_versions' => array(

'thumbnail' => array(

'upload_dir' => DIR_DOWNLOAD . 'userprofiles/',
'upload_url' => HTTP_SERVER . '/userprofiles/',

));

UploadHandler

use index.php or specify a name

$(function () {
    'use strict';
    // Change this to the location of your server-side upload handler:
    var url = 'server/php/',
        uploadButton = $('<button/>')
            .addClass('btn btn-primary')
            .prop('disabled', true)
            .text('Processing...')
            .on('click', function () {

Change progress bar color

        .progress {
                height: 20px;
                margin-bottom: 20px;
                overflow: hidden;
                background-color: #f5f5f5;
                display: block;
                border-radius: 4px;
                box-shadow: inset 0 1px 2px rgba(0,0,0,0.1) }

        .progress-bar {
                float: left;
                overflow: hidden;
                display: block;
                width: 0;
                height: 100%;
                font-size: 12px;
                color: #008;
                text-align: center;
                background-color: #00fa0f;
                box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15);
                transition: width .6s ease }

Change progress bar behaviour

        $('#progress .progress-bar').css(
            'visibility',
            'hidden'
        );

Remove "no file selected."

<!DOCTYPE html>
<html>
<head>
<style>

.inputWrapper {
    height: 100%;
    width: 108px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    /*Using a background color, but you can use a background image to represent a button*/
    background-color: #DDF;
}
.fileInput {
    cursor: pointer;
    height: 100%;
    position:absolute;
    top: 0;
    right: 0;
    z-index: 99;
    /*This makes the button huge. If you want a bigger button, increase the font size*/
    font-size:50px;
    /*Opacity settings for all browsers*/
    opacity: 0;
    -moz-opacity: 0;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0)
}
</style>
</head>

<body>
<div class="inputWrapper fileinput-button">
    <button id="image_alt">Select Picture</button>
    <input id="fileupload" class="fileInput" type="file" name="files[]" multiple>
</div>
</body>
</html>

Change File Name

<?php
/*
* jQuery File Upload Plugin PHP Example 5.14
* https://github.com/blueimp/jQuery-File-Upload
*
* Copyright 2010, Sebastian Tschan
* https://blueimp.net
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/MIT
*/

define('DIR_DOWNLOAD', $_SERVER['DOCUMENT_ROOT'].'/');
define ('HTTP_SERVER' , 'http://'.$_SERVER['HTTP_HOST']);

error_reporting(E_ALL | E_STRICT);
require('UploadHandler.php');
//$upload_handler = new UploadHandler();

$session_folder='aniu';

class CustomUploadHandler extends UploadHandler
{
    protected function trim_file_name($name, $type) {
        $name = parent::trim_file_name($name, $type);
        $name="thisistestname.jpg";
        return $name;
    }
}

$upload_handler = new CustomUploadHandler(array(
'upload_dir' => DIR_DOWNLOAD . '../test/files/',
'upload_url' => HTTP_SERVER . '/test/files/',
'image_versions' => array(
'thumbnail' => array(
'upload_dir' => DIR_DOWNLOAD .'/test/files/thumbnails/',
'upload_url' => HTTP_SERVER . '/test/files/',
),
),
));
?>

The Fei's Tech Notes

Thursday, November 21, 2013

Blueimp Jquery Upload File Plugin