Como o título é um exemplo, não explicarei desta vez, porque também reuni este exemplo. Referenciei cerca de 5 ou 6 plug-ins de arrastar e arrastar e depois escolhi os melhores e finalmente me tornei esse exemplo. Vamos dar uma olhada (o endereço não pode ser garantido por um longo tempo. Se falhar, clique na demonstração no final do artigo para baixar):
Refiro -me a um site de álbum de fotos estrangeiras. As mudanças não são muito, mas o estilo da música de pássaros é convertido em chinês, e o estilo de upload também foi alterado. A razão para escolher isso é que é fácil para mim expandir. Ele suporta três maneiras de adicionar fotos, uma para fazer upload de arrastar e soltar, uma para fazer upload de um arquivo regular e o outro é adicionar fotos de rede. Ele integra de maneira inteligente os três modos de upload e você pode navegar com o navegador do IE. Se o HTML5 não for suportado, não haverá facilidade para fazer upload de fotos, como mostrado na figura:
A coisa mais importante sobre o upload de arrastar e soltar é o código de peça JS, que implementa 70% das funções, e o outro 30% simplesmente envia as informações da imagem ao plano de fundo e, em seguida, faz o processamento correspondente, como compactação, corte, etc. Então, vamos dar uma olhada no código de implementação do JS primeiro.
$ (). Pronto (function () {
if ($. Browser.safari || $ .browser.mozilla) {
$ ('#dtb-msg1 .compatible'). show ();
$ ('#dtb-msg1 .NotCompatible'). Hide ();
$ ('#drop_zone_home'). hover (function () {
$ (this) .Children ('P'). Stop (). Animate ({top: '0px'}, 200);
},função(){
$ (this) .Children ('P'). Stop (). Animate ({top: '-44px'}, 200);
});
// implementação da função
$ (documento) .on ({
Dragleave: function (e) {
E.PreventDefault ();
$ ('. Dashboard_target_box'). removeclass ('over');
},
Drop: function (e) {
E.PreventDefault ();
//$('.dashboard_target_box').removeclass('over ');
},
Dragenter: function (e) {
E.PreventDefault ();
$ ('. Dashboard_target_box'). addclass ('over');
},
Dragover: function (e) {
E.PreventDefault ();
$ ('. Dashboard_target_box'). addclass ('over');
}
});
var box = document.getElementById ('Target_box');
box.addeventListener ("gota", função (e) {
E.PreventDefault ();
// Obtenha a lista de arquivos
var filEList = e.datatransfer.files;
var iMg = document.createElement ('img');
// Detecte se está arrastando o arquivo para a página
if (filelist.length == 0) {
$ ('. Dashboard_target_box'). removeclass ('over');
retornar;
}
// detecta se o arquivo é uma imagem
if (fileList [0] .type.indexof ('imagem') === -1) {
$ ('. Dashboard_target_box'). removeclass ('over');
retornar;
}
if ($. Browser.safari) {
// Chrome8+
img.src = window.webkiturl.createObjectUrl (fileList [0]);
} else if ($. Browser.mozilla) {
// FF4+
img.src = window.url.createObjectUrl (fileList [0]);
}outro{
// instanciar o objeto do leitor de arquivo
var leitor = new fileReader ();
leitor.onload = function (e) {
img.src = this.result;
$ (document.body) .appendChild (img);
}
reader.readasDataurl (fileList [0]);
}
var xhr = novo xmlHttPrequest ();
xhr.open ("post", "test.php", true);
xhr.setRequestHeader ("x-requestado-with", "xmlhttprequest");
xhr.upload.addeventListener ("Progress", function (e) {
$ ("#dtb-msg3"). hide ();
$ ("#dtb-msg4 span"). show ();
$ ("#dtb-msg4"). crianças ('span'). Eq (1) .css ({width: '0px'});
$ ('. Mostrar'). html ('');
if (e.LengthComputable) {
var carregado = math.ceil ((E.Loaded / e.total) * 100);
$ ("#dtb-msg4"). crianças ('span'). Eq (1) .css ({width: (carregado*2)+'px'});
}
}, false);
xhr.addeventListener ("load", function (e) {
$ ('. Dashboard_target_box'). removeclass ('over');
$ ("#dtb-msg3"). show ();
$ ("#dtb-msg4 span"). hide ();
var resultado = jQuery.parsejson (e.target.ResponsEtext);
alerta (resultado.FileName);
$ ('. Mostrar'). Append (resultado.img);
}, false);
var fd = new FormData ();
fd.append ('xfile', fileList [0]);
xhr.send (fd);
},falso);
}outro{
$ ('#dtb-msg1 .compatible'). hide ();
$ ('#dtb-msg1 .NotCompatible'). Show ();
}
});
No começo, julguei o tipo de navegador pela primeira vez, porque, como acabei de introduzir, diferentes navegadores vêem diferentes interfaces. A principal implementação do código começa com a implementação da função. Não vou dizer muito sobre por que é assim que opera e qual é o princípio. Você pode consultar este artigo: "Explicação detalhada de arrastar e soltar upload na página inicial Renren (HTML5 Drag & Drop, FileReader API, formData)". No entanto, o código na parte de upload do Ajax ainda é um pouco diferente, porque Renren parece ser um pouco problemático, então encontrarei outra maneira.
Finalmente, estou enviando parte do código PHP. Aqui, eu apenas forneço uma referência, você pode escrevê -la de acordo com as necessidades do projeto.
$ r = novo stdclass ();
cabeçalho ('Tipo de conteúdo: aplicativo/json');
$ maxsize = 10; // mb
if ($ _ arquivos ['xfile'] ['size']> ($ maxsize * 1048576)) {
$ r-> error = "O tamanho da imagem não excede $ maxsize mb";
}
$ pasta = 'arquivos/';
if (! is_dir ($ pasta)) {
mkdir ($ pasta);
}
$ pasta. = $ _post ['pasta']? $ _Post ['pasta']. '/': '';
if (! is_dir ($ pasta)) {
mkdir ($ pasta);
}
if (preg_match ('/image/i', $ _files ['xfile'] ['type'])) {
$ filename = $ _post ['value']? $ _Post ['value']: $ pasta. sha1 (@microtime (). '-'. $ _files ['xfile'] ['nome']). '.jpg';
}outro{
$ tld = split (',', $ _files ['xfile'] ['nome']);
$ tld = $ tld [contagem ($ tld) - 1];
$ filename = $ _post ['value']? $ _Post ['value']: $ pasta. sha1 (@microtime (). '-'. $ _files ['xfile'] ['nome']). $ tld;
}
$ types = array ('imagem/png', 'imagem/gif', 'imagem/jpeg');
if (in_array ($ _ arquivos ['xfile'] ['type'], $ types)) {
$ origem = file_get_contents ($ _ arquivos ["xfile"] ["tmp_name"]);
ImageResize ($ fonte, $ FILENAME, $ _POST ['Width'], $ _Post ['Height'], $ _Post ['Crop'], $ _Post ['Quality']);
}outro{
move_uploaded_file ($ _ arquivos ["xfile"] ["tmp_name"], $ filename);
}
$ path = str_replace ('test.php', '', $ _server ['script_name']);
$ r-> nome do arquivo = $ filename;
$ r-> caminho = $ caminho;
$ r-> img = '<img src = "'. $ path. $ filename. '" />';
echo json_encode ($ r);
Função ImageResize ($ fonte, $ Destination, $ width = 0, $ Height = 0, $ Crop = False, $ Quality = 80) {
$ Quality = $ Quality? $ Quality: 80;
$ imagem = imageCreateFromString ($ fonte);
if ($ imagem) {
// Obtenha dimensões
$ W = Imagesx ($ imagem);
$ h = imagensy ($ imagem);
if (($ width && $ w> $ width) || ($ altura && $ h> $ altura)) {
$ ratio = $ w / $ h;
if (($ ratio> = 1 || $ height == 0) && $ width &&! $ CROP) {
$ new_height = $ width / $ ratio;
$ new_width = $ width;
} elseif ($ colrop && $ ratio <= ($ width / $ altura)) {
$ new_height = $ width / $ ratio;
$ new_width = $ width;
} outro {
$ new_width = $ altura * $ ratio;
$ new_Height = $ Height;
}
} outro {
$ new_width = $ w;
$ new_height = $ h;
}
$ x_mid = $ new_width *.5; // meio horizontal
$ y_mid = $ new_height *.5; // meio vertical
// reampleto
error_log ('altura:'. $ new_height. ' - largura:'. $ new_width);
$ new = imageCreatetruecolor (redond ($ new_width), rodada ($ new_height));
ImageEcoPyResampled ($ new, $ image, 0, 0, 0, $ new_width, $ new_height, $ w, $ h);
// Cortar
if ($ colrop) {
$ CROP = ImageCreatetruEcolor ($ Width? $ Width: $ new_width, $ Height? $ Height: $ new_Height);
ImageCOPYRESSAMPLED ($ CROP, $ NEW, 0, 0, ($ X_MID - ($ width * .5)), 0, $ width, $ Height, $ width, $ Height);
// ($ y_mid - ($ Height *.5))
}
// Saída
// Habilitar intertraução [para JPEG progressivo]
ImageInterlace ($ Crop? $ Crop: $ novo, verdadeiro);
$ dext = strtolower (pathinfo ($ destino, pathinfo_extension));
if ($ dext == '') {
$ dext = $ ext;
$ destino. = '.' . $ ext;
}
Switch ($ dext) {
case 'jpeg':
case 'jpg':
ImageJPEG ($ CROP? $ CROP: $ NEW, $ Destination, $ Quality);
quebrar;
case 'png':
$ pngQuality = ($ Quality - 100) / 11.111111;
$ pngQuality = redond (ABS ($ pngQuality));
ImagePng ($ CROP?
quebrar;
caso 'gif':
ImageGIF ($ CROP? $ CROP: $ novo, $ Destination);
quebrar;
}
@Imagedestroy ($ imagem);
@Imagedestroy ($ new);
@Imagedestroy ($ Crop);
}
}
O PHP acabará devolvendo uma matriz de formato JSON. As informações que eu retorno são o endereço da imagem, o nome e o código HTML do IMG. Finalmente, a matriz JSON é obtida no JS e processada. Neste ponto, a operação acabou.
No início do artigo, também mencionamos que também clicamos para selecionar o upload de arquivos e as fotos de rede, porque esses dois não estão dentro do escopo deste tópico, para que não falemos sobre eles. Além disso, essas duas funções não são problemáticas para implementar.
Download de demonstração