Prefacio
Hoy compartiré con ustedes acerca de "Imágenes cargadas, vistas previas y guardadas en la carpeta del directorio del sitio web".
a) Envío sincrónico (envío a nivel de página)
Código de front-end
(1) A través del formulario; tipo de entrada = "archivo" el tipo de etiqueta es archivo
<form id="form1" runat="server">
<div>
<input type="file" name="file" />
<input type="submit" value="上传" />
</div>
</form>
(2) Envíe el formulario completo de la página al servidor y actualice la página;
(3) Si se incluye un archivo, el archivo se empaquetará como una secuencia de bytes y se cargará en el servidor;
(4) Utilice el objeto Solicitar en el backend para obtener el formulario Etiqueta de entrada del elemento; Solicitar ["archivo"]; El valor clave aquí es el valor del nombre de la etiqueta de entrada . ¡Ten cuidado aquí! (5) esta vez para obtener la ruta del archivo de imagen es una ruta absoluta
Código de backend
string filePath = Request["file"];
if (filePath == null) return;
string filename = filePath.Substring(filePath.LastIndexOf("\\") + 1);
string fileEx = filePath.Substring(filePath.LastIndexOf(".") + 1);
string paths = filename.Substring(0, filename.IndexOf("."));
//合成站点下的站点下的images目录文件
string serverpath = Server.MapPath(@"~\images\") + filename;
//实例化并获取客户端上传的文件对象
System.Drawing.Image image = System.Drawing.Image.FromFile(filePath);
//保存图片至站点下的images目录文件
image.Save(serverpath);
image.Dispose();
(6) Utilice el método de interceptación de cadenas. Obtenga el nombre del archivo (incluido el sufijo) ====> string filename = filePath.Substring (filePath.LastIndexOf ("\") + 1);
(7) Utilice el método de interceptación de cadenas. Obtenga la extensión de archivo ====> string fileEx = filePath.Substring (filePath.LastIndexOf (".") + 1);
(8) Utilice el método de interceptación de cadenas. Obtenga el nombre del archivo (sin incluir el sufijo) ====> rutas de cadena = nombre de archivo.Substring (0, nombre de archivo.IndexOf ("."));
b) Carga asincrónica (enviada a través de ajax)
(1) Generalmente, al acceder a webapi, cargue los datos utilizando el método de transmisión de datos en formato JSON;
(2) En circunstancias especiales, si desea cargar archivos, use el objeto FormData para simular el envío de formularios;
(3) JS El objeto FormData enviará los datos como enviar el formulario sincrónicamente, y luego el archivo puede incluirse en FormData y enviarse juntos;
Interfaz
código js
var form = new FormData();
form.append("file", $('#file')[0].files[0]);
$.ajax({
url: "/pages/WebAPI",
method: "post",
contentType: false,
processData: false,
dataType: false,
data: form,
success: function (result) {
//上传成功回调函数
}
});
(4) El uso de FormData
var form = new FormData ();
agregar datos a formdata; los parámetros están en forma de nombre de datos y valor de datos;
form.append ('nombre', valor);
agregar archivos a formdata; el parámetro es nombre Y el objeto de archivo; el nombre aquí no tiene ningún efecto práctico; pero debe tener la forma de archivo
form.append ('file', fileObj);
(5) Puede ver esta declaración
form.append ("file", $ ('# file ') [0] .files [0]); En
$ (' # file ') [0] .files [0], ¿por qué agregar [0] a $ (' # file ')?
Esta declaración significa obtener el objeto de archivo cuya identificación es la etiqueta de archivo, y agregar [0] es convertir la sintaxis de JQ en sintaxis de Javascript.1
) En JQuery-var fileObj = $ ('# file') [0]. files [0];
2) En JavaScript-varfileObj = document.getElementById ('file'). files [0];
Por lo tanto, el atributo .files [0] está en javascript, por lo que JQ debe convertirse a JS.
>使用异步上传的注意点
(6) Cuando se usa el objeto FormData para cargar datos, el método get no está permitido.
(7) Cuando se usa el objeto FormData para cargar datos que contienen archivos, usar directamente $ .post () no es válido.
(8) Cuando se usa el objeto FormData para cargar datos que contienen archivos , Debe utilizar el método $ .ajax ()
(9) El método de envío debe ser posterior.
$.ajax({
url: '',
method: 'post', //由于jq的版本问题，这个参数在有的地方也叫做type
dataType: 'json',
contentType: false, //必须是false
processData: false, //必须是false
success: function(){
}
})
Vista previa de la imagen
Si desea una vista previa de la imagen, es mucho más fácil
var file = $('#file')[0].files[0];
if (file) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onloadend = function (even) {
$('#file_img').attr("src", even.currentTarget.result);
}
}
Código de backend
private string SaveImage()
{
string result = "";
if (!Directory.Exists(Server.MapPath("/images/Userimg")))
{
Directory.CreateDirectory(Server.MapPath("/images/Userimg"));
}
HttpPostedFile file = Request.Files[0];
if (!file.ContentType.Contains("image/"))
{
result = Newtonsoft.Json.JsonConvert.SerializeObject(new
{
Code = 10002,
Message = "传输文件格式不正确!"
});
}else{
Random ran = new Random();
String fileName ="img"+ran.Next(1000,9999).ToString();
String filesuffix = this.GetFileSuffix(file.ContentType);
String fullName = Path.Combine("/images/Userimg/", fileName + filesuffix);
file.SaveAs(Server.MapPath(fullName));
result = Newtonsoft.Json.JsonConvert.SerializeObject(new
{
Code = 10002,
Message = "传输文件格式不正确!"
});
}
return result;
}
/// <summary>
/// 获取图片文件的 扩展名
/// </summary>
/// <param name="mimeType"></param>
/// <returns></returns>
private string GetFileSuffix(string mimeType)
{
string suffix = string.Empty;
switch (mimeType)
{
case "image/png":
suffix = ".png";
break;
case "image/jpeg":
suffix = ".jpg";
break;
case "image/gif":
suffix = ".gif";
break;
default:
suffix = ".jpg";
break;
}
return suffix;
}
(1) Determine si existe la ruta del archivo que se va a cargar y, si no existe, créelo.
(2) Obtenga la colección de archivos cargada por el cliente en el formato MIME de varias partes, es decir, HttpPostedFile file = Request.Files [0];
(3) Interprete el tipo de objeto de archivo actual
(4) Tenga en cuenta que el mismo archivo se puede cargar varias veces, Para evitar errores innecesarios, dele un número aleatorio de cuatro dígitos y
cámbiele el nombre (5) HttpPostedFile puede proporcionar un objeto de guardado directo [SaveAs ()], simplemente proporcione los parámetros de la dirección del archivo de guardado.
Efecto de aplicación
Ese pequeño proyecto generalmente guarda el archivo en el archivo del directorio del sitio.
a) Asegurar la exactitud del directorio de acceso
b) Asegurar la accesibilidad del archivo (la razón más importante)
c) Cuando se lanza el proyecto, el usuario que accede al archivo es IIS_USER, si está en otros directorios, no hay autoridad de acceso;
Al final
Bueno, el estudio y el acabado de hoy han terminado. Bienvenido a señalar las deficiencias y aceptar sinceramente las críticas.