Blueimp jQuery文件上傳音頻/視頻預覽

Question

經過一番谷歌搜索之後，我無法找到使用jQuery文件上傳插件的音頻&視頻預覽擴展的示例。

http://blueimp.github.io/jQuery-File-Upload/

有沒有人使用這些誰可以提供一個最小的例子嗎？

Answer 1

當您使用插件上傳視頻時，您只需添加jquery.fileupload-video文件即可。這是我如何使用它

$(function() { 
    'use strict'; 
    var url = YourURL+"public/server/php/"; 

    $('#fileupload').fileupload({ 
     url: url, 
     method: 'POST', 
     dataType: 'json', 
     autoUpload: true, 
     acceptFileTypes: /(\.|\/)(mp4)$/i, 
     maxFileSize: 40000000, // 40 MB 
     disableImageResize: /Android(?!.*Chrome)|Opera/ 
      .test(window.navigator.userAgent), 
     previewMaxWidth: 300, 
     previewMaxHeight: 200, 
     previewCrop: true, 
    }).on('fileuploadadd', function (e, data) { 
     data.context = $('<div class="col-md-3 videopreview" />').appendTo('#files'); 
     $.each(data.files, function (index, file) { 
      var node = $('<p/>'); 
      if (!index) { 
       node 
        .append('<br>') 
      } 
      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($('<span class="text-danger"/>').text(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 .progress-bar').css(
      'width', 
      progress + '%' 
     ); 
    }).on('fileuploaddone', function (e, data) { 
     $.each(data.result.files, function (index, file) { 
      if (file.url) { 
       var link = $('<a>') 
        .attr('target', '_blank') 
        .prop('href', file.url); 
       $(data.context.children()[index]) 
        .wrap(link).append($('<span/>').text(file.name)); 
       $("#filesHidden").append('<input type="hidden" name="images[]" value="' + file.name + '">'); 
      } else if (file.error) { 
       var error = $('<span class="text-danger"/>').text(file.error); 
       $(data.context.children()[index]) 
        .append('<br>') 
        .append(error); 
      } 
     }); 
    }).on('fileuploadfail', function (e, data) { 
     $.each(data.files, function (index, file) { 
      var error = $('<span class="text-danger"/>').text('File upload failed.'); 
      $(data.context.children()[index]) 
       .append('<br>') 
       .append(error); 
     }); 
    }).prop('disabled', !$.support.fileInput) 
     .parent().addClass($.support.fileInput ? undefined : 'disabled'); 

}); 

還記得添加以下

• jquery.ui.widget.js
• 負載image.min.js
• jquery.iframe運輸.js文件
• jquery.fileupload.js
• jquery.fileupload - 驗證 - es_ES.js //這僅僅是語言
• jquery.fileupload.css