Skip to content
simple Javascript Upload Zone with drag&drop and chunk upload
Branch: master
Clone or download
falk
Latest commit de76383 Aug 22, 2016
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
upload first commit Jun 16, 2016
README.md add event Aug 22, 2016
client.html get server response in file_uploaded event Jun 25, 2016
jUpload.js return false bei init, if nor aviable Aug 22, 2016
screenshot.png first commit Jun 16, 2016
server.php first commit Jun 16, 2016

README.md

jUpload

a simple Javascript file upload.

Screnshot

Feature

  • chunk split of files
  • drag and drop support
  • fallback to normal upload-form for older browsers
  • supports: IE 11+, Firefox 13+, Chrome 20+, Opera 12+, Safari 6+

Requires

  • jQuery

Example

<form id="form" action="server_normal.php" method="POST" enctype="multipart/form-data">
             <input name="file" id="uploadField" type="file" multiple />
              <div id="filezone">
                  DROPZONE
              </div>
              <button type="submit">submit</button>
</form>
<script type="text/javascript">
    u = new jUpload({
            upload_fild: "#uploadField",
            filezone: "#filezone",
            upload_on_submit: '#form',
            target: "server.php"
        });
    u.on("addedFile", function(file){
        console.log(file);
    });
    u.on("upload_end", function(){
        u.files = [];
    });
</script>

Options

  • target: url for commit to server
  • params: optional parameters to send to Server
  • upload_field: identifier for file-input
  • filezone: identifier for upload-area
  • check_file: function for file-validation (Size, Format, ...). Must return a boolean
  • upload_on_submit: identifier of the wrapped form-tag: if upload should start on submit. (default: empty)
  • chunk_size: byte-Size of chunks (default: 3 * 1024 * 1024 = 3MB)
  • abort: boolean (default: false), can be used to abort during the update process

Methods

  • init(opts): init the upload area
  • on(eventName, func): registrate a eventlistener
  • addFile(file): manually add a File-object
  • removeFile(uniqueName): remove File before upload by unique name
  • upload(): start the upload
  • files: array of current files

Events

  • unaviable: called by init, if upload is completely not supported
  • aviable: called by init, if upload available
  • drop_aviable: called by init, if drag&drop available
  • drop_unaviable: called by init, if drag&drop not available (but dropzone can by clicked to select file)
  • addFile_before: (Param: file) called by select file, before add
  • addedFile: (Param: uploadFile) called after file added to files array
  • addedFiles: called after (multiple) files are added
  • removedFiles: (Param: [uploadFile]) remove file by unique Name
  • upload_before: called by starting the upload
  • upload_end: called after finished upload
  • prozess: (Params: bytes_total_size, uploaded_byte_size) called by updates in upload-prozess
  • file_uploaded: (Param: uploadFile) called by each file if it is uploaded
  • file_prozess: (Param: uploadFile, p ) called by each file when upload updates the upload-state (p is a float, between 0 and 1)
  • file_upload_response: (Param: uploadFile, current_chunk_number, server_response) allow access to server response
You can’t perform that action at this time.