Debido a que el título es un ejemplo, no explicaré esta vez, porque también he reunido este ejemplo. He hecho referencia a unos 5 o 6 complementos y demostraciones de arrastrar y soltar, y luego elegí los mejores, y finalmente me convirtió en un ejemplo así. Echemos un vistazo (no se puede garantizar que la dirección sea efectiva durante mucho tiempo. Si falla, haga clic en la demostración al final del artículo para descargar):
Me refiero a un sitio web de álbum de fotos extranjeros. Los cambios no son mucho, pero el estilo de la canción de las aves se convierte en chino, y el estilo de carga también se ha cambiado. La razón para elegir esto es que es fácil para mí expandirme. Admite tres formas de agregar imágenes, una para cargar arrastrar y soltar, una para cargar un archivo normal, y el otro es agregar imágenes de red. Integra inteligentemente los tres modos de carga juntos, y puedes navegar con IE Browser. Si no es compatible con HTML5, no hay un aviso para cargar imágenes, como se muestra en la imagen:
Lo más importante de la carga de arrastrar y soltar es el código de pieza JS, que implementa el 70% de las funciones, y el otro 30% simplemente envía la información de la imagen al fondo y luego realiza el procesamiento correspondiente, como compresión, recorte, etc. Así que echemos un vistazo al código de implementación JS primero.
$ (). Ready (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);
},función(){
$ (this) .children ('p'). stop (). Animate ({top: '-44px'}, 200);
});
// Implementación de funciones
$ (documento) .on ({
dragleeave: function (e) {
E.PreventDefault ();
$ ('. Dashboard_target_box'). RemoveClass ('Over');
},
Drop: función (e) {
E.PreventDefault ();
//$('.Dashboard_Target_box').removeclass('over ');
},
dragenter: function (e) {
E.PreventDefault ();
$ ('. Dashboard_target_box'). AddClass ('Over');
},
dragaver: function (e) {
E.PreventDefault ();
$ ('. Dashboard_target_box'). AddClass ('Over');
}
});
var box = document.getElementById ('target_box');
box.addeventListener ("Drop", function (e) {
E.PreventDefault ();
// Obtener la lista de archivos
var filelist = e.datatransfer.files;
var img = document.createElement ('img');
// detectar si está arrastrando el archivo a la página
if (filelist.length == 0) {
$ ('. Dashboard_target_box'). RemoveClass ('Over');
devolver;
}
// detectar si el archivo es una imagen
if (filelist [0] .type.indexof ('imagen') === -1) {
$ ('. Dashboard_target_box'). RemoveClass ('Over');
devolver;
}
if ($. browser.safari) {
// Chrome8+
img.src = window.webkiturl.createObjectUrl (filelista [0]);
} else if ($. browser.mozilla) {
// ff4+
img.src = window.url.createObjectUrl (filelista [0]);
}demás{
// instanciar el objeto del lector de archivos
var lector = new FileReader ();
Reader.onload = function (e) {
img.src = this.result;
$ (document.body) .appendChild (img);
}
lector.readasdataurl (filelista [0]);
}
var xhr = new xmlhttprequest ();
xhr.open ("post", "test.php", true);
XHR.SetRequestHeader ("X-Requested con", "xmlhttprequest");
xhr.upload.addeventListener ("progreso", función (e) {
$ ("#dtb-msg3"). hide ();
$ ("#dtb-msg4 span"). show ();
$ ("#dtb-msg4"). Children ('span'). eq (1) .css ({ancho: '0px'});
$ ('. Show'). Html ('');
if (E.LengthComputable) {
var cargado = math.ceil ((e.loaded / e.total) * 100);
$ ("#dtb-msg4"). Children ('span'). eq (1) .css ({ancho: (cargado*2)+'px'});
}
}, FALSO);
xhr.addeventListener ("carga", función (e) {
$ ('. Dashboard_target_box'). RemoveClass ('Over');
$ ("#dtb-msg3"). show ();
$ ("#dtb-msg4 span"). hide ();
resultado var = jQuery.Parsejson (e.target.esponsetext);
alerta (resultado.fileName);
$ ('. Show'). Append (result.img);
}, FALSO);
var fd = new FormData ();
fd.append ('xfile', filelist [0]);
XHR.SEND (FD);
},FALSO);
}demás{
$ ('#dtb-msg1 .compatible'). hide ();
$ ('#dtb-msg1 .notCompatible'). show ();
}
});
Al principio, por primera vez juzgué el tipo de navegador, porque como acabo de presentar, diferentes navegadores ven diferentes interfaces. La implementación principal del código comienza con la implementación de funciones. No diré mucho sobre por qué así es como funciona y cuál es el principio. Puede consultar este artículo: "Explicación detallada de la carga de arrastre y solta en la página de inicio de Renren (HTML5 Drag & Drop, FileReader API, FormData)". Sin embargo, el código en la parte de carga AJAX sigue siendo un poco diferente, porque Renren parece ser un poco problemático, por lo que encontraré otra forma.
Finalmente, estoy cargando parte del código PHP. Aquí solo proporciono una referencia, puede escribirla usted mismo de acuerdo con las necesidades del proyecto.
$ r = nuevo stdclass ();
encabezado ('Content-type: Application/JSON');
$ maxSize = 10; //Megabyte
if ($ _ archivos ['xfile'] ['size']> ($ maxsize * 1048576)) {
$ r-> error = "El tamaño de la imagen no excede $ maxsize mb";
}
$ carpeta = 'files/';
if (! is_dir ($ carpeta)) {
Mkdir ($ carpeta);
}
$ carpeta. = $ _post ['carpeta']? $ _Post ['carpeta']. '/': '';
if (! is_dir ($ carpeta)) {
Mkdir ($ carpeta);
}
if (preg_match ('/image/i', $ _files ['xfile'] ['type'])) {
$ filename = $ _post ['valor']? $ _Post ['valor']: $ carpeta. Sha1 (@microTime (). '-'. $ _files ['xfile'] ['name']). '.jpg';
}demás{
$ tld = split (',', $ _files ['xfile'] ['name']);
$ tld = $ tld [count ($ tld) - 1];
$ filename = $ _post ['valor']? $ _Post ['valor']: $ carpeta. Sha1 (@microTime (). '-'. $ _files ['xfile'] ['name']). $ tld;
}
$ tipos = array ('image/png', 'image/gif', 'image/jpeg');
if (in_array ($ _ archivos ['xfile'] ['type'], $ tipos)) {
$ fuente = file_get_contents ($ _ archivos ["xfile"] ["tmp_name"]);
ImageresSize ($ Source, $ FileName, $ _post ['width'], $ _post ['altura'], $ _post ['cultivo'], $ _post ['calidad']);
}demás{
Move_uploaded_file ($ _ archivos ["xfile"] ["tmp_name"], $ filename);
}
$ path = str_replace ('test.php', '', $ _server ['script_name']);
$ R-> FileName = $ FileName;
$ r-> ruta = $ ruta;
$ r-> img = '<img src = "'. $ Path. $ FileName. '" />';
echo json_encode ($ r);
function imageSize ($ fuente, $ destino, $ width = 0, $ altura = 0, $ cultivo = falso, $ Quality = 80) {
$ calidad = $ calidad? $ Calidad: 80;
$ image = imageCreateFromString ($ fuente);
if ($ image) {
// Obtener dimensiones
$ W = IMAGEX ($ Image);
$ H = ImageSy ($ Image);
if (($ width && $ w> $ width) || ($ altura && $ h> $ altura)) {
$ ratio = $ w / $ h;
if (($ ratio> = 1 || $ altura == 0) && $ width &&! $ cultiv) {
$ new_height = $ width / $ ratio;
$ new_width = $ width;
} elseif ($ cultivo && $ ratio <= ($ width / $ altura)) {
$ new_height = $ width / $ ratio;
$ new_width = $ width;
} demás {
$ new_width = $ altura * $ relación;
$ new_height = $ altura;
}
} demás {
$ new_width = $ w;
$ new_height = $ h;
}
$ x_mid = $ new_width *.5; // medio horizontal
$ y_mid = $ new_height *.5; // Medio vertical
// volver a muestrear
error_log ('altura:'. $ new_height. ' - ancho:'. $ new_width);
$ new = ImageCreateTruecolor (Round ($ new_width), ronda ($ new_height));
imageCopyResampled ($ nuevo, $ imagen, 0, 0, 0, $ new_width, $ new_height, $ w, $ h);
// Cultivo
if ($ cosc) {
$ Crop = ImageCreateTruecolor ($ Width? $ Width: $ new_width, $ altura? $ altura: $ new_height);
imageCopyResampled ($ cultivo, $ nuevo, 0, 0, ($ x_mid - ($ ancho * .5)), 0, $ ancho, $ altura, $ ancho, $ altura);
// ($ y_mid - ($ altura *.5))
}
// Producción
// Habilitar el interlanciado [para JPEG progresivo]
ImageInterlace ($ Crop? $ Crop: $ nuevo, verdadero);
$ dext = strtolower (pathInfo ($ destino, pathInfo_extension));
if ($ dext == '') {
$ dext = $ ext;
$ destino. = '.' . $ ext;
}
Switch ($ dext) {
Caso 'jpeg':
Caso 'JPG':
ImageJpeg ($ Crop? $ Crop: $ nuevo, $ destino, $ calidad);
romper;
Caso 'PNG':
$ PNGQuity = ($ Quality - 100) / 11.111111;
$ PNGQuity = Round (ABS ($ PNGQuity));
ImagePng ($ Crop? $ Crop: $ New, $ Destino, $ PNGQuality);
romper;
Caso 'GIF':
ImageGif ($ Crop? $ Crop: $ New, $ Destino);
romper;
}
@imageGeStroy ($ imagen);
@ImageGeStroy ($ nuevo);
@imageedestroy ($ cultivo);
}
}
PHP eventualmente devolverá una matriz de formato JSON. La información que devuelve es la dirección de imagen, el nombre y el código HTML de IMG. Finalmente, la matriz JSON se obtiene en JS y se procesa. En este punto, la operación ha terminado.
Al comienzo del artículo, también mencionamos que también hacemos clic para seleccionar la carga de archivos y las imágenes de red, porque estos dos no están dentro del alcance de este tema, por lo que no hablaremos de ellas. Además, estas dos funciones no son problemáticas de implementar.
descarga de demostración