外掛dropify
基本例項：
基本一步就可應用，其餘的樣式自己再進行微調。

$('.dropify').dropify({
    messages: {
        'default': '點選或拖拽檔案到這裡',
        'replace': '點選或拖拽檔案到這裡來替換檔案',
        'remove':  '移除檔案',
        'error':   '對不起，你上傳的檔案太大了',
    }
});

defaultFile: 如果有預設檔案可使用它。可以在使用外掛時初始化此選項，或直接在DOM元素中使用data-default-file=”url_of_your_file”（推薦）。

<input type="file" class="dropify" data-default-file="url_of_your_file" />

height: dropify元素高度。或如下例子設定DOM元素屬性： data-height=”300”

<input type="file" class="dropify" data-height="300" />

maxFileSize: 設定上傳檔案大小。如果超出設定大小則顯示錯誤資訊。單位有：K, M 和 G.

<input type="file" class="dropify" data-max-file-size
 
="3M" />
//maxFileSizePreview: 設定預覽檔案大小的最大值(假設為圖片)。如果檔案大小超出此值，那麼只有檔案圖示而不顯示預覽圖。單位有K, M 和 G。
<input type="file" class="dropify" data-max-file-size-preview="3M" />
//messages: 此選項能讓你設定自定義資訊，並僅能用陣列設定並初始化。該資訊會被tpl選項替換。
$('.dropify').dropify({
    messages: {'default': 'Drag and drop a file here or click','replace': 'Drag and drop or click to replace','remove':  'Remove','error':   'Ooops, something wrong appended.'}
}
//error: 此項能代替預設的錯誤資訊，僅能用陣列方式初始化。 
 
{{ value }}  為代替的選項值文字標記。
$('.dropify').dropify({
    error: {'fileSize': 'The file size is too big ({{ value }} max).','minWidth': 'The image width is too small ({{ value }}}px min).','maxWidth': 'The image width is too big ({{ value }}}px max).','minHeight': 'The image height is too small ({{ value }}}px min).','maxHeight': 'The image height is too big ({{ value }}px max).','imageFormat': 'The image format is not allowed ({{ value }} only).'}
}
//tpl: 用於更新預設的模板，僅在初始化時用陣列方式設定。
$('.dropify').dropify({
    tpl: {
        wrap:            '<div class="dropify-wrapper"></div>',
        loader:          '<div class="dropify-loader"></div>',
        message:         '<div class="dropify-message"><span class="file-icon" /> <p>{{ default }}</p></div>',
        preview:         '<div class="dropify-preview"><span class="dropify-render"></span><div class="dropify-infos"><div class="dropify-infos-inner"><p class="dropify-infos-message">{{ replace }}</p></div></div></div>',
        filename:        '<p class="dropify-filename"><span class="file-icon"></span> <span class="dropify-filename-inner"></span></p>',
        clearButton:     '<button type="button" class="dropify-clear">{{ remove }}</button>',
        errorLine:       '<p class="dropify-error">{{ error }}</p>',
        errorsContainer: '<div class="dropify-errors-container"><ul></ul></div>'}
}

minWidth: 設定最小寬度。超出此選項會顯示錯誤資訊

<input type="file" class="dropify" data-min-width="400" />

maxWidth: 設定最大寬度。超出此選項會顯示錯誤資訊

<input type="file" class="dropify" data-max-width="1000" />

<input type="file" class="dropify" data-min-height="400" />
//minHeight: 設定最小高度。超出此選項會顯示錯誤資訊
//maxHeight: 設定最大高度。超出此選項會顯示錯誤資訊
<input type="file" class="dropify" data-max-height="1000" />
//disabled: 使控制元件失效。
<input type="file" class="dropify" disabled="disabled" />
//showRemove: 顯示移除按鈕。預設為true.
<input type="file" class="dropify" data-show-remove="false" />
//showLoader: 顯示載入器。預設: true.
<input type="file" class="dropify" data-show-loader="false" />
//showErrors: 是否顯示錯誤資訊，預設: true.
<input type="file" class="dropify" data-show-errors="true" />
//errorsPosition: 錯誤資訊顯示位置，有兩選項：overlay or outside。預設： overlay.
<input type="file" class="dropify" data-errors-position="outside" />
//allowedFormats: 設定允許通過或拒絕的圖片格式。如新增屬性 data-allowed-formats="portrait square"只允許portrait和square圖上傳。預設值：
['portrait', 'square', 'landscape'].
<input type="file" class="dropify" data-allowed-formats="portrait square" />
//allowedFileExtensions: 允許副檔名。例如新增屬性 data-allowed-file-extensions="pdf png psd" 將允許PDF, PNG 和 PSD 檔案上傳預設值所有副檔名都允許： ['*'].
<input type="file" class="dropify" data-allowed-file-extensions="pdf png psd" />

事件

//dropify.beforeClear: 該事件在點選“移除”按鈕時呼叫，並在清理預覽圖之前。你能使用element.xxxx來訪問所有的Dropify物件屬性。
var drEvent = $('.dropify').dropify();
drEvent.on('dropify.beforeClear',
function(event, element) {
    return confirm("Do you really want to delete \"" + element.filename + "\" ?");
});
//dropify.afterClear: 該事件在點選“移除”按鈕時呼叫，並在清理預覽圖之後。你能使用element.xxxx來訪問所有的Dropify物件屬性。
var drEvent = $('.dropify').dropify();
drEvent.on('dropify.afterClear',
function(event, element) {
    alert('File deleted');
});
//dropify.errors: 當一個或多個錯誤在程序當中出現時該事件被呼叫。
var drEvent = $('.dropify').dropify();
drEvent.on('dropify.errors',
function(event, element) {
    alert('Has Errors!');
});
//dropify.error.xxxxx: 另外dropify.errors可以根據具體錯誤事件來執行各自的邏輯。
var drEvent = $('.dropify').dropify();
drEvent.on('dropify.error.fileSize',
function(event, element) {
    alert('Filesize error message!');
});
drEvent.on('dropify.error.minWidth',
function(event, element) {
    alert('Min width error message!');
});
drEvent.on('dropify.error.maxWidth',
function(event, element) {
    alert('Max width error message!');
});
drEvent.on('dropify.error.minHeight',
function(event, element) {
    alert('Min height error message!');
});
drEvent.on('dropify.error.maxHeight',
function(event, element) {
    alert('Max height error message!');
});
drEvent.on('dropify.error.imageFormat',
function(event, element) {
    alert('Image format error message!');
});