jQuery-File-Upload 使用文檔(翻譯)

最近要用到多圖上傳,準(zhǔn)備使用這個(gè)插件,但是沒搜到相關(guān)的文檔,只有官方的文檔,主要是以有道翻譯和個(gè)人理解為主 可能會(huì)有一些問題,但是比看原文是方便一些.

使用文檔

插件的基本信息

配置指令

提示:

盡管資源庫(kù)的演示包含了遠(yuǎn)程服務(wù)的源文件,但是還是建議使用的時(shí)候?qū)⑺鼈兿螺d上傳到自己的服務(wù)器上.這是比github demo界面更可靠的來源

在PHP網(wǎng)站上使用jQuery文件上傳(UI版本)

1.如果你的網(wǎng)站是php,那么使用我們提供的插件只需要一步.下載并提取它,然后將提取的文件夾放到你自己的項(xiàng)目里.
訪問你下載的目錄 你應(yīng)該可以看到和demo一樣的功能,可以上傳文件到你的網(wǎng)絡(luò).
如果插件并不能順利使用,請(qǐng)確認(rèn)你的php目錄允許你的服務(wù)器請(qǐng)求訪問.

node.js使用file upload

你可以導(dǎo)入安裝一個(gè)節(jié)點(diǎn),node.js通過via在您的服務(wù)器上傳服務(wù).(node.js和via都是類似于github的開源社區(qū),不過使用上有點(diǎn)不一樣,感興趣可以自己看一下.node官方網(wǎng)站:https://nodejs.org/en/ via官方網(wǎng)站:https://www.npmjs.com/)
你可以通過下面的代碼來運(yùn)行服務(wù)

./node_modules/blueimp-file-upload-node/server.js

然后下載插件文檔,提取出來后,將main.js文件中的url設(shè)置為你自己的url(例如:http://localhots:8080)
然后你可以上傳你的項(xiàng)目文件(不要放沒用的服務(wù)器文件夾)到任何靜態(tài)服務(wù)器上并且使用它.

使用一個(gè)定制的服務(wù)器端上傳處理程序(jQuery)

1.在您的項(xiàng)目中要實(shí)現(xiàn)文件上傳處理的功能(Ruby.Python.Java等),它處理基于表單的文件上傳.并將其上傳到您的服務(wù)器.具體請(qǐng)參閱文檔主頁(yè)的教程.(具體的使用會(huì)在后邊更新翻譯,大概的看了一眼java的,官網(wǎng)地址:https://github.com/blueimp/jQuery-File-Upload/wiki)
2.下載并解壓下載插件.
3.修改main.js并且將url設(shè)置為你自定義的文件上傳路徑.或者你可以刪除url,然后通過html編輯,將html表單的動(dòng)作屬性調(diào)整到你自定義的文件上傳的url.如果你的上傳需要另一個(gè)參數(shù)名字,那么你就需要調(diào)整文件輸入名屬性或者設(shè)置paraName選項(xiàng).
4.將插件目錄上傳到你的網(wǎng)址.
5.返回的值是json類型的

{"files": [
  {
    "name": "picture1.jpg",
    "size": 902604,
    "url": "http:\/\/example.org\/files\/picture1.jpg",
    "thumbnailUrl": "http:\/\/example.org\/files\/thumbnail\/picture1.jpg",
    "deleteUrl": "http:\/\/example.org\/files\/picture1.jpg",
    "deleteType": "DELETE"
  },
  {
    "name": "picture2.jpg",
    "size": 841946,
    "url": "http:\/\/example.org\/files\/picture2.jpg",
    "thumbnailUrl": "http:\/\/example.org\/files\/thumbnail\/picture2.jpg",
    "deleteUrl": "http:\/\/example.org\/files\/picture2.jpg",
    "deleteType": "DELETE"
  }
]}

如果想返回錯(cuò)誤信息,那么在對(duì)象中加入錯(cuò)誤信息相關(guān)的屬性就可以了.

{"files": [
  {
    "name": "picture1.jpg",
    "size": 902604,
    "error": "Filetype not allowed"
  },
  {
    "name": "picture2.jpg",
    "size": 841946,
    "error": "Filetype not allowed"
  }
]}

如果需要使用刪除按鈕來刪除文件,請(qǐng)求如下:

{"files": [
  {
    "picture1.jpg": true
  },
  {
    "picture2.jpg": true
  }
]}

注意即使是只上傳了一個(gè)文件,響應(yīng)也是種是一個(gè)包含數(shù)組的json對(duì)象.
然后你應(yīng)該可以看到和demo中一樣的文件上傳,允許你講照片上傳到你自己的網(wǎng)絡(luò)上.

注意事項(xiàng)和其他相關(guān)探討.

插件使用的是Iframe傳輸模塊,用于像Microsoft Internet Explorer和Opera這樣的瀏覽器，不支持XMLHTTPRequest類型文件上傳。
基于iframe的上傳需要為json響應(yīng)提供tex/plain或者text/html的內(nèi)容類型,如果ifame的響應(yīng)被設(shè)置為application/json,那么它們講提示一個(gè)不需要下載的對(duì)話框.
你可以使用Accept表頭來為文件上傳響應(yīng)提供不同的內(nèi)容類型,下面是接受content-type變更的php代碼事例:

<?php
header('Vary: Accept');
if (isset($_SERVER['HTTP_ACCEPT']) &&
    (strpos($_SERVER['HTTP_ACCEPT'], 'application/json') !== false)) {
    header('Content-type: application/json');
} else {
    header('Content-type: text/plain');
}
?>

ruby事例:

def update_attachment
  name  = params[:attachment_name]
  style = params[:attachment_style]
  image = params[:user][name]

  raise "No attachment #{name} for User!" unless User.attachment_definitions[name.to_sym]

  current_user.update("#{name}" => image)
  render(json: current_user.to_fileupload(name, style), content_type: request.format)
end

render 中的 content-type屬性,為ie和其他瀏覽器設(shè)置了正確的標(biāo)頭
為了記錄,這是to_fileuoload方法:

def to_fileupload(attachment_name, attachment_style)
  {
    files: [
      {
        id:   read_attribute(:id),
        name: read_attribute("#{attachment_name}_file_name"),
        type: read_attribute("#{attachment_name}_content_type"),
        size: read_attribute("#{attachment_name}_file_size"),
        url:  send(attachment_name).url(attachment_style)
      }
    ]
  }
end

如果只是想使用最基本的插件那么請(qǐng)看這些
官方文檔:https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin

基礎(chǔ)插件

下載的插件包含了一個(gè)基于bootstrap的完整用戶界面.
如果你想使用自己的界面,是可以使用最基本的插件的.
html中只有最低限度的需求和簡(jiǎn)單的回調(diào)處理(可以參考API來參考使用不同的回調(diào)選項(xiàng))

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery File Upload Example</title>
</head>
<body>
<input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>
<script>
$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p/>').text(file.name).appendTo(document.body);
            });
        }
    });
});
</script>
</body> 
</html>

響應(yīng)數(shù)據(jù)類型.

使用的例子都是講數(shù)據(jù)類型設(shè)置為json,希望服務(wù)器為每一個(gè)上傳文件返回一個(gè)json響應(yīng),但是惡意處理html內(nèi)容將響應(yīng)轉(zhuǎn)換為其他類型,也可以在完成處理的方法處理數(shù)據(jù)類型.

如何在基本的上傳文件插件中顯示上傳進(jìn)度.

fileload插件觸發(fā)個(gè)人上傳和所有上傳的季度時(shí)間,事件處理程序可以通過綁定按鈕之類的(參考api文檔)

$('#fileupload').fileupload({
    /* ... */
    progressall: function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('#progress .bar').css(
            'width',
            progress + '%'
        );
    }
});

前邊的代碼使用內(nèi)部元素來顯示進(jìn)度節(jié)點(diǎn),節(jié)點(diǎn)通過百分比來顯示進(jìn)度狀態(tài):

<div id="progress">
    <div class="bar" style="width: 0%;"></div>
</div>

可以通過css文件設(shè)置不同的背景顏色和進(jìn)度條類型.

.bar {
    height: 18px;
    background: green;
}

異步處理

通常情況下,可以再add callback中完成回調(diào),為了能達(dá)到異步處理的效果,你可以使用context屬性(實(shí)際是jquery.ajax的屬性 官網(wǎng):http://api.jquery.com/jQuery.ajax/)

$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        add: function (e, data) {
            data.context = $('<p/>').text('Uploading...').appendTo(document.body);
            data.submit();
        },
        done: function (e, data) {
            data.context.text('Upload finished.');
        }
    });
});

如何通過點(diǎn)擊按鈕上傳

根據(jù)前邊的例子,是可以用點(diǎn)擊按鈕上傳來代替自動(dòng)上傳的

$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        add: function (e, data) {
            data.context = $('<button/>').text('Upload')
                .appendTo(document.body)
                .click(function () {
                    data.context = $('<p/>').text('Uploading...').replaceAll($(this));
                    data.submit();
                });
        },
        done: function (e, data) {
            data.context.text('Upload finished.');
        }
    });
});

客戶端圖像大小的調(diào)整.

如果想調(diào)整客戶端圖像大小,你需要引入以下文件:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
<script src="js/vendor/jquery.ui.widget.js"></script>
<!-- The Load Image plugin is included for the preview images and image resizing functionality -->
<script src="https://blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js"></script>
<!-- The Canvas to Blob plugin is included for image resizing functionality -->
<script src="https://blueimp.github.io/JavaScript-Canvas-to-Blob/js/canvas-to-blob.min.js"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="js/jquery.iframe-transport.js"></script>
<!-- The basic File Upload plugin -->
<script src="js/jquery.fileupload.js"></script>
<!-- The File Upload processing plugin -->
<script src="js/jquery.fileupload-process.js"></script>
<!-- The File Upload image preview & resize plugin -->
<script src="js/jquery.fileupload-image.js"></script>

然后你要做的就是將disableImageResize 設(shè)置為false
默認(rèn)圖片大小為1920*1080,你可以更改它的屬性

$('#fileupload').fileupload({
    url: '//jquery-file-upload.appspot.com/',
    dataType: 'json',
    // Enable image resizing, except for Android and Opera,
    // which actually support image resizing, but fail to
    // send Blob objects via XHR requests:
    disableImageResize: /Android(?!.*Chrome)|Opera/
        .test(window.navigator && navigator.userAgent),
    imageMaxWidth: 800,
    imageMaxHeight: 800,
    imageCrop: true // Force cropped images
})
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具（例如配置管理，服務(wù)發(fā)現(xiàn)，斷路器，智...
    卡卡羅2017閱讀 136,596評(píng)論 19贊 139
  • Spring Web MVC Spring Web MVC 是包含在 Spring 框架中的 Web 框架，建立于...
    Hsinwong閱讀 22,943評(píng)論 1贊 92
  • 1.jQuery File Upload最簡(jiǎn)單的上傳模型： 在官網(wǎng)上下載下來的jQuery File Upload...
    麥殼兒UIandFE2閱讀 45,140評(píng)論 0贊 11
  • 安裝 安裝說明 注意:盡管這個(gè)倉(cāng)庫(kù)中包含的演示例子包括存放在遠(yuǎn)程服務(wù)器的源文件，但仍然推薦下載所有文件并上傳到你自...
    mcat閱讀 2,626評(píng)論 2贊 1
  • 所謂的資糧是什么東西呢。 我這個(gè)沒資糧的人正好可以拿出來說一說。 莊子開篇第一講，逍遙游，鯤鵬起飛的故事其實(shí)可能就...
    j_haven閱讀 246評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容