jquery set - 有人可以解釋如何實現jQuery文件上傳插件嗎?




5 Answers

幾天前我正在尋找類似的功能,並且在tutorialzine上遇到了一個很好的教程。 這是一個工作示例。 完整的教程可以在here找到。

簡單的形式來保存文件上傳對話框:

<form id="upload" method="post" action="upload.php" enctype="multipart/form-data">
  <input type="file" name="uploadctl" multiple />
  <ul id="fileList">
    <!-- The file list will be shown here -->
  </ul>
</form>

這裡是上傳文件的jQuery代碼:

$('#upload').fileupload({

  // This function is called when a file is added to the queue
  add: function (e, data) {
    //This area will contain file list and progress information.
    var tpl = $('<li class="working">'+
                '<input type="text" value="0" data-width="48" data-height="48" data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" />'+
                '<p></p><span></span></li>' );

    // Append the file name and file size
    tpl.find('p').text(data.files[0].name)
                 .append('<i>' + formatFileSize(data.files[0].size) + '</i>');

    // Add the HTML to the UL element
    data.context = tpl.appendTo(ul);

    // Initialize the knob plugin. This part can be ignored, if you are showing progress in some other way.
    tpl.find('input').knob();

    // Listen for clicks on the cancel icon
    tpl.find('span').click(function(){
      if(tpl.hasClass('working')){
              jqXHR.abort();
      }
      tpl.fadeOut(function(){
              tpl.remove();
      });
    });

    // Automatically upload the file once it is added to the queue
    var jqXHR = data.submit();
  },
  progress: function(e, data){

        // Calculate the completion percentage of the upload
        var progress = parseInt(data.loaded / data.total * 100, 10);

        // Update the hidden input field and trigger a change
        // so that the jQuery knob plugin knows to update the dial
        data.context.find('input').val(progress).change();

        if(progress == 100){
            data.context.removeClass('working');
        }
    }
});
//Helper function for calculation of progress
function formatFileSize(bytes) {
    if (typeof bytes !== 'number') {
        return '';
    }

    if (bytes >= 1000000000) {
        return (bytes / 1000000000).toFixed(2) + ' GB';
    }

    if (bytes >= 1000000) {
        return (bytes / 1000000).toFixed(2) + ' MB';
    }
    return (bytes / 1000).toFixed(2) + ' KB';
}

這裡是處理數據的PHP代碼示例:

if($_POST) {
    $allowed = array('jpg', 'jpeg');

    if(isset($_FILES['uploadctl']) && $_FILES['uploadctl']['error'] == 0){

        $extension = pathinfo($_FILES['uploadctl']['name'], PATHINFO_EXTENSION);

        if(!in_array(strtolower($extension), $allowed)){
            echo '{"status":"error"}';
            exit;
        }

        if(move_uploaded_file($_FILES['uploadctl']['tmp_name'], "/yourpath/." . $extension)){
            echo '{"status":"success"}';
            exit;
        }
        echo '{"status":"error"}';
    }
    exit();
}

上面的代碼可以添加到任何現有的表單中。 該程序一旦添加就自動上傳圖像。 此功能可以更改,您可以在提交現有表單時提交圖像。

用實際的代碼更新了我的答案。 所有的信用原始作者的代碼。

來源: herehere

title

編輯:

這似乎仍然是流量,所以我會解釋我最終做了什麼。 我最終通過遵循Subrat的教程獲得了插件,這是可以接受的答案。 然而,jQuery文件上傳是一個真正的麻煩,如果你正在尋找一個簡單的文件上傳插件,我會強烈推薦Uploadify (謝謝​​,CORSAIR!)。 答案指出,它僅供非商業用途使用。

背景

我試圖使用blueimp的jQuery文件上傳來允許用戶上傳文件。 按照設置說明, 開箱即可完美運行 。 但要在我的網站上實際使用它,我希望能夠做幾件事情:

  • 在我現有的任何頁面上添加上傳器
  • 更改上傳文件的目錄

插件的所有文件都位於根目錄下的文件夾中。

我試過了...

  • 將演示頁面移入根目錄並更新必要腳本的路徑
  • 按照here建議更改UploadHandler.php文件中的“upload_dir”和“upload_url”選項。
  • 更改演示javascript第二行中的URL

在所有情況下,預覽顯示,進度條運行,但文件無法上傳,並在控制台中出現此錯誤: Uncaught TypeError: Cannot read property 'files' of undefined 。 我不明白插件的所有部分是如何工作的,這使得它很難調試。

演示頁面中的JavaScript:

$(function () {
'use strict';
// Change this to the location of your server-side upload handler:
var url = 'file_upload/server/php/UploadHandler.php',
    uploadButton = $('<button/>')
        .addClass('btn')
        .prop('disabled', true)
        .text('Processing...')
        .on('click', function () {
            var $this = $(this),
                data = $this.data();
            $this
                .off('click')
                .text('Abort')
                .on('click', function () {
                    $this.remove();
                    data.abort();
                });
            data.submit().always(function () {
                $this.remove();
            });
        });
$('#fileupload').fileupload({
    url: url,
    dataType: 'json',
    autoUpload: false,
    acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
    maxFileSize: 5000000, // 5 MB
    // 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.userAgent),
    previewMaxWidth: 100,
    previewMaxHeight: 100,
    previewCrop: true
}).on('fileuploadadd', function (e, data) {
    data.context = $('<div/>').appendTo('#files');
    $.each(data.files, function (index, file) {
        var node = $('<p/>')
                .append($('<span/>').text(file.name));
        if (!index) {
            node
                .append('<br>')
                .append(uploadButton.clone(true).data(data));
        }
        node.appendTo(data.context);
    });
}).on('fileuploadprocessalways', function (e, data) {
    var index = data.index,
        file = data.files[index],
        node = $(data.context.children()[index]);
    if (file.preview) {
        node
            .prepend('<br>')
            .prepend(file.preview);
    }
    if (file.error) {
        node
            .append('<br>')
            .append(file.error);
    }
    if (index + 1 === data.files.length) {
        data.context.find('button')
            .text('Upload')
            .prop('disabled', !!data.files.error);
    }
}).on('fileuploadprogressall', function (e, data) {
    var progress = parseInt(data.loaded / data.total * 100, 10);
    $('#progress .bar').css(
        'width',
        progress + '%'
    );
}).on('fileuploaddone', function (e, data) {
    $.each(data.result.files, function (index, file) {
        var link = $('<a>')
            .attr('target', '_blank')
            .prop('href', file.url);
        $(data.context.children()[index])
            .wrap(link);
    });
}).on('fileuploadfail', function (e, data) {
    $.each(data.result.files, function (index, file) {
        var error = $('<span/>').text(file.error);
        $(data.context.children()[index])
            .append('<br>')
            .append(error);
    });
}).prop('disabled', !$.support.fileInput)
    .parent().addClass($.support.fileInput ? undefined : 'disabled');
});

我對缺乏文檔感到驚訝; 它似乎應該是一個簡單的事情來改變。 如果有人能解釋如何做到這一點,我將不勝感激。




我也為此付出了努力,但是一旦我找到了UploadHandler.php中的路徑工作方式,就可以開始工作:upload_dir和upload_url是關於使其工作的唯一設置。 同時檢查您的服務器錯誤日誌以獲取調試信息




這是上傳文件的好的Angular插件,它是免費的!

角度文件上傳




我在Rails上苦苦掙扎了一段時間,然後有人將它偽裝成所有我創建的代碼。

雖然看起來你沒有在Rails中使用它,但是如果有人正在使用它,請檢查這個gem 。 源代碼在這裡 - > jQueryFileUpload Rails

更新:

為了滿足評論者,我已經更新了我的答案。 基本上“ gem這裡是源代碼 ”如果它消失了,那就用很長的路吧。







Related