ajax+.net mvcマルチ画像アップロードのプレビューを追加します.
ajax+.net mvcマルチ画像アップロードのプレビューを追加します.
@{
ViewBag.Title = "Index";
Layout = null;
}
<html>
<head>
<meta charset="UTF-8">
<title> title>
head>
<body>
<script src="~/scripts/jquery-3.3.1.js">script>
<script type="text/javascript">
// ，
function xmTanUploadImg(obj) {
var imgTypes = new Array();
imgTypes[0] = "JPG";
imgTypes[1] = "ICO";
imgTypes[2] = "PNG";
imgTypes[3] = "GIF";
imgTypes[4] = "JPEG";
imgTypes[5] = "TGA";
var num=0;//
var fl = obj.files.length;
if(fl<=7){
for(var i = 0; i < fl; i++) {
var file = obj.files[i];
//
var filename = obj.files[i].name;
imgType = filename.substring(filename.lastIndexOf(".") + 1, file.length)
var reader = new FileReader();
//
if (imgType.toUpperCase()==imgTypes[0]||imgType.toUpperCase()==imgTypes[1]||imgType.toUpperCase()==imgTypes[2]||imgType.toUpperCase()==imgTypes[3]||imgType.toUpperCase()==imgTypes[4]||imgType.toUpperCase()==imgTypes[5]) {
reader.onload = function(e) {
img = document.createElement("img");
img.src = this.result;
img.style.width = "80px";
img.style.height = "100px";
document.getElementById("showimg").appendChild(img);
$("#upload").attr("disabled",false);
}
} else{
num++;
alert(" :"+num+" ");
$("#upload").attr("disabled",true);
}
reader.readAsDataURL(file);
}
}else{
alert(" 7 ");
}
}
function Upload() {
var param = new FormData(($("#form")[0]));
$.ajax({
url: "/Upload.ashx",
data: param,
type:"post",
processData: false,
contentType: false,
success: function (data) {
alert(data)
}
})
}
script>
<form method="post" enctype="multipart/form-data" id="form" >
<input type="file" name="file" id="file" multiple="multiple" onchange="xmTanUploadImg(this)" />
<input type="button" value=" " onclick="Upload()" />
form>
<div id="showimg">
div>
body>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace WebApplication5
{
///
/// Upload
///
public class Upload : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
var num = context.Request.Files.Count;
for (int i = 0; i < num; i++)
{
HttpPostedFile file = context.Request.Files[i];
// ( ， Guid)
string path = "/Upload/" + Guid.NewGuid().ToString() + file.FileName;
file.SaveAs(context.Request.MapPath(path));//
}
context.Response.Write(" ");
}
public bool IsReusable
{
get
{
return false;
}
}
}
}このバックグラウンドでは、画像かどうかは検証されていませんので、実際に使うにはタイプ判定が必要です.