O FileUpload é um grande componente de upload de arquivo escrito em JavaScript puro no exterior. Esse componente suporta funções como upload de shard, continuação do ponto de interrupção e vários arquivos.
Aqui está uma maneira de usar o modelo de componente de upload do FileUpload (FineUploaderbasic):
A seguir, o código de configuração:
Configuração front-end:
Botão de definição de definição-> <div id = "Basic_uploader_fine"> <i> </i> Selecione Arquivo </div> <div id = "triggerUpload"> Clique para fazer upload </div> <!-Show Information-> <div Id = "Mensagens"> </Div = "Canscelall"> CanCel <//" id = "pauseupload"> suspender upload </div> <div id = "continuação"> continue upload </div> <cript> $ (document) .ready (function () {$ fub = $ ('#basic_uploader_fine'); $ mensagens = $ ('#mensagens); var do u u u u u u u u u u u u u u u u u u u u u u u u u u u u u u paraver = newloades. debug mode multiple: true, // Multi-file upload button: $fub[0], //Upload button autoUpload: false, // If you do not upload automatically, call the uploadStoredFiless method to upload manually// Verify the upload file validation: { allowedExtensions: ['jpeg', 'jpg', 'png', 'zip', 'rar'], }, // Remote Endereço de solicitação (endereço relativo ou absoluto) solicitação: {endpoint: 'server/endpoint.php'}, retratar: {enabaeauto: false // padrão para false retratar automaticamente}, chunking: {habilitado:}, pareço: 500, // tamanho do grupo, o padrão é 2m de defesa 3: {}},}}, scelTeart: 500, // tamanho do grupo, o padrão é 2M de defesa 3M: {} {}}},}}, SUSCURLET: 500, // tamanho do grupo, o padrão é 2m de defesa 3M: {} {}}, »Sumpsize: 500, // do grupo, o tamanho do grupo é 2M de defesa. "Servidor/endpoint.php? Concluído" // upload do grupo é concluído após o processamento}}, // Função de chamada de retorno de chamada: {// File inicia o upload onSubMit: function (id, nome do arquivo) {$ messhand.append ('<div id = "file-' + id + '" = "margin: 20px 0"> function(id, fileName) { $('#file-' + id).addClass('alert-info') .html('<img src="client/loading.gif"> ' + 'Initializing ' + '"'); }, //Progress bar onProgress: function(id, fileName, loaded, total) { if (loaded < total) { progress = Math.round(loaded / total * 100) + '% de' + math.Round (total / 1024) + 'kb'; src = "http://img.zcool.cn/community/01ff2756629d096ac725b2c8e95102.gif"> ' +' upload file ... ' + progresso); src = "http://img.zcool.cn/community/01ff2756629d096ac725b2c8e95102.gif"> ' +' upload no file ...... '); IMG = Responsejson ['Target'] $ ('#FILE-' + ID) .RemoveClass ('ALERT-INFO') .Addclass ('ALERT-SUCCESS') .html (' id) .removeclass ('alert-info') .addclass ('alert-error') .html ('<i> </i>' + 'erro com' + '"' + filename + '":' + Responsejson.error); '_' + razão); Arquivos não utilizados $ ('#CANCELALL'). Clique em (Function () {// Upload de arquivo único não tem efeito porque aqueles que já estão carregando não podem usar esse cancelamento para cancelar o uploader.cancelall ();}); upload $ ('#continuação epload'). clique (function () {uploader.continueUpload (0);});}); </script>Código PHP:
//Handler.php O site oficial requer_once "handler.php"; $ uploader = new uploadHandler (); // tipo de arquivo limite $ uploader-> allowDextensions = Array (); // limite de tamanho do arquivo $ uploader-> sizelimit = null; // caixa de arquivo upload $ uploader-> inputName = "qqfile"; // define o local de armazenamento de arquivos agrupados $ uploader-> spedoSFoldder = "chunks"; Handler.php Código e adicionou uma regra de geração de pastas [você também pode personalizá-lo]) $ uPLOPLEDIDECTORY = $ uploader-> getPathName ('membro_avatar'); if ($ method == Post ") {Header (" content-type: text/planing "); // Mesclar o grupo após o upload do grupo ser concluído se (isSet ($ _ get ["done"])) {$ resultado = $ uploader-> combinechunks ($ uploadDirectory); // Mesclar arquivos agrupados} else {// inicialize o arquivo de upload $ resultado = $ uploader-> handleoupload ($ uploadDirectory); // Obtenha o nome do upload $ resultado ["uploadName"] = $ uploader-> getUploadName (); } echo json_encode ($ resultado);} // Excluir processamento de arquivos se ($ method == "delete") {$ resultado = $ uploader-> handletelete ($ uploadDirectory); eco json_encode ($ resultado);} else {cabeçalho ("http/1.0 405 método não permitido");}O exposto acima é uma configuração simples de modelo personalizado, espero que seja útil para o aprendizado de todos.