la lógica de aplicación
Primero de todo lo que sabe, Ajax no puede enviar mensaje con una petición de un archivo que, todavía utilizan la sincronización, pero refrescado, que no se actualizan la página original, ir dentro de una actualización de iframe oculto, para formar, llenar el formulario correctamente la acción el manejo de la operación de carga de archivos. Estrecha con destino significativo para llenar un iframe oculto. Una vez presentada esta forma, se carga el archivo, la página se actualiza como iframe oculto, por lo que el usuario puede ver el efecto del efecto del tratamiento y Ajax es el mismo.
estructura del DOM
Aquí hay dos advertencias, primero iframe está oculto, invisible para el usuario. En segundo lugar, la forma de la propiedad de destino es el atributo ID iframe, debe asegurarse de que consistente este lugar, de lo contrario obtener la dirección de retorno del servidor no puede ser
<form action="#" method="post" enctype="multipart/form-data" target="hidden_frame" id='upload'>
<input type="file" name="pic" accept="image/gif;image/jpg;" />
</form>
<iframe style="display:none" name='hidden_frame' id="hidden_frame" style='display:none'></iframe>previa de la foto
Antes de cargar imágenes en general, queremos que el usuario puede obtener una vista previa a la mirada después de la carga, hay dos enfoques. Después de una imagen se carga y tanto éxito, el servidor devuelve la dirección de la imagen, la imagen muestra, por medio de la diferencia de tiempo es pequeño, dando al usuario la ilusión es realmente como en la vista previa. La segunda forma es en la imagen antes de subir imágenes para obtener la entrada en la dirección local y, a continuación, mostrar, porque es un local de mostrar imágenes, así que no hay diferencia de tiempo, un avance real. La simple lógica como código de la lógica
$("#userHeadImg").change(function(event) {
var file = $(event.target)[0].files[0];
var src = URL.createObjectURL(file);
if(file){
//表示获取到了图片
}else{
//表示点击了取消
}
//这里的src就是图片的地址，将它放在任意一个img标签的src属性里面
});de inicio de subida
En forma de gatillo onchange evento dentro de presentar eventos, subir fotos
$("#upload").submit();Obtener el servidor devuelve la URL de imagen
La dirección del servidor se devuelve al marco flotante, iframe se actualiza. Utilice iframe onLoad js escucha, si se produce allí proceso de carga, significa que el servidor devuelve la información
var imgsrc=$(this).contents().find("pre").text();Aumentar las restricciones de tipos de archivos de subida
accept="image/gif;image/jpg;"
pensar
De este modo, para una sola imagen cargar ningún problema, si es más de uno, cómo optimizar el?
Este artículo se reproduce en: Ape 2048 JavaScript asíncrono seudo lograr subir fotos