檔案上傳欄位屬性

Anderson

upload

Since: Editor 1.5

Single file upload field.
Please note - this property requires the Editor extension for DataTables.

Description

The ability to upload files is an important element in complex forms and data structures. The upload field type provides that ability to Editor by presenting an file upload control to the end user, giving them the option of uploading a single file for the field (the uploadMany field type allows multiple files to be assigned to a single field)

The file upload is performed asynchronously to the main form - i.e. as soon as a file is selected, either via drag-and-drop or a standard file selection control, it is immediately uploaded to the server and the field will take a value that identifies the file (typically this is a database id for a row containing information about the file, but can also be any other identifying data such as a file name). This field value is then submitted as part of the standard form.

The upload field type is supported on the server-side by the Upload class available in Editor's standard libraries (PHP | .NET). Please refer to the documentation for those libraries for how to configure the server-side scripts.

Additionally, an overview of how to configure the upload field types on the client-side is available in the Editor manual. The remaining documentation here is concerned solely with detailing the options available for this field type.

Events

This field type can trigger the following events from the input element (field().input()):

• upload.editor - Upload complete event - this should be used in place of a change event for this field type. The following parameters are passed in to the event handler:
  1. object event - The event object
  2. Any value - File identifier from the server - normally a primary key value or a file name.

Type

This option can be given in the following type(s):

• object

Options

This field type supports the following options (in addition to the default options):

Name	Type	Default
ajax		undefined
Ajax URL or jQuery.ajax configuration object that should be used for the Ajax request to upload a file. If this is property is not give, the value from ajax is used. As of Editor 1.9 the ajax option can be used as a function allowing complete control over how the data is handled and sent to the server. This also allows fully client-side control of the data - e.g. processing an image in Javascript and submitting to the server as part of the actual form.
ajaxData		undefined
A function that can be used to add additional data that will be submitted to the server with the upload Ajax request. The function is given three parameters: A single parameter - a FormData object. Use append() to add data to this object. The File object for the file being uploaded (since 1.9.1) The file index number being uploaded, for when multiple files are selected (since 1.9.1).
attr Since: 1.9.1
Set HTML attributes on the input element. This is an object of attribute name / value pairs that are applied to the input element for the field.
clearText		{Empty string}
Enable the clear button and set the text to show in the button. When set users will have the ability to click the button which results in the field's value being cleared (i.e. set to be an empty string). When not set, the clear button is not shown and there is no ability to clear the field's value.
display
Function which is used to display information about the file that is currently selected by the field's value. This function should return HTML that is shown in the Editor form to describe the file to the end user. It can be a simple descriptive piece of text (a file name for example) or render HTML such as an img tag. The function is given a single parameter: The value of the field - additional information about the file can be found from the file() method, assuming that database information was given for the Upload class on the server-side - see the upload manual for details.
dragDrop		true
Enable / disable the drag and drop area allowing uses to drag files from their operating system into Editor. File are automatically uploaded when dropped.
dragDropText		Drag and drop a file here to upload
Text to show in the drag and drop area.
fileReadText		Uploading file
Text shown when a file is being read before it is uploaded. This text will only be visible for large files when the read takes a noticeable amount of time.
noFileText		No file
Text to show when no file has been set for the field's value.
processingText Since: 1.7.1		Processing
Text shown after the upload of the file has completed, while the server is processing the data. The text will return to uploadText when the processing has finished.
uploadText		Choose file...
Text shown in the upload file button. This is really an input type="file" input control, but styled to look like a button.

Methods

This field type does not support any additional methods over the default methods.

Examples

Display an upload field type that displays an image:

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
new $.fn.dataTable.Editor( {
  ajax: "php/staff.php",
  table: "#staff",
  fields: [ {
      label: "Image:",
      name: "image",
      type: "upload",
      display: function ( val ) {
          return '<img src="'+table.file( 'files', fileId ).webPath+'"/>';
      }
    },
    // additional fields...
  ]
} );

Disable drag and drop, and enable clearing current value:

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
new $.fn.dataTable.Editor( {
  ajax: "php/press.php",
  table: "#press",
  fields: [ {
      label: "Press release PDF:",
      name: "pdf",
      type: "upload",
      display: function ( val ) {
          return table.file( 'files', fileId ).fileName;
      },
      dragDrop: false,
      clearText: 'Remove file'
    },
    // additional fields...
  ]
} );

Listen for an upload event:

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var editor = new $.fn.dataTable.Editor( {
  ajax: "php/staff.php",
  table: "#staff",
  fields: [ {
      label: "Image:",
      name: "image",
      type: "upload",
      display: function ( val ) {
          return '<img src="'+table.file( 'files', fileId ).webPath+'"/>';
      }
    },
    // additional fields...
  ]
} );
 
$( editor.field( 'image' ).input() ).on( 'upload.editor', function (e, val) {
  console.log( 'Image field has changed value', val );
} );

Anderson

{
                        label: "圖片:",
                        name: "product_category.picture_id",
                        type: "upload",
                        display: function ( file_id ) {
                            return '<img src="'+editor.file( 'product_category_files', file_id ).web_path+'"/>';
                        },
                        clearText: "清除",
                        dragDropText: "請將圖片拖曳至此",
                        noFileText: "沒有檔案",
                        uploadText: "上傳檔案",
                        noImageText: '沒有圖片'
                    }