asp.Net(c#)一度に複数の画像をプレビューしてアップロード

4717 ワード

aspでNetはウェブサイトを開発する時、いつもピクチャーをアップロードして、今IE 7は現れて、もとのimg.src='xxx.jpg'というプレビュー方式は失効した.新しいアップロード前のプレビュー画像の処理方法を紹介します.コードは簡単で、直接コードを貼りました.
aspxファイルコード:
@ Page Language
=
"
C#
"
AutoEventWireup
=
"
true
"
CodeBehind
=
"
Default.aspx.cs
"
Inherits
=
"
UploadPicture._Default
"
%>
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<
html
xmlns
="http://www.w3.org/1999/xhtml"
>
<
head
runat
="server"
>
<
title
>
タイトルページなし
title
>
<
link
href
="http://www.svnhost.cn/style/public.css"
rel
="stylesheet"
type
="text/css"
/>
head
>
<
body
>
<
script
language
="javascript"
>
function
$(o){
return
document.getElementById(o);}
function
CheckImgCss(o,img) {
if
(
!
/
/.((jpg)|(bmp)|(gif)|(png))$
/
ig.test(o.value)) { alert(
'
jpg、bmp、gif、pngフォーマットの画像しかアップロードできません!
'
); o.outerHTML
=
o.outerHTML; }
else
{ $(img).filters.item(
"
DXImageTransform.Microsoft.AlphaImageLoader
"
).src
=
o.value;
//
$('Image1').src = o.value;//ここでIE 7はもうサポートされていません.だから上の方法があります.
} }
script
>
<
form
id
="form1"
runat
="server"
>
<
div
><
h1
>
一度に複数の画像をアップロードしてプレビューします.画像を選択してください.
h1
>
<
asp:FileUpload
ID
="FileUpload1"
onchange
="CheckImgCss(this, 'img');"
runat
="server"
/>
<
asp:FileUpload
ID
="FileUpload2"
onchange
="CheckImgCss(this, 'img');"
runat
="server"
/>
<
asp:Button
ID
="Button1"
runat
="server"
OnClick
="Button1_Click"
Text
=アップロード
/>
<
div
id
="img"
style
="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=,sizingMethod=scale);width:102px;height:100px;"
>
div
>
div
>
form
>
<
div
>
<
iframe
src
="http://www.svnhost.cn"
width
="1000"
height
="1800"
frameborder
="0"
scrolling
="no"
>
iframe
>
body
>
html
>
 
csファイルコード:
 
using
System;
using
System.Data;
using
System.Configuration;
using
System.Collections;
using
System.Web;
using
System.Web.Security;
using
System.Web.UI;
using
System.Web.UI.WebControls;
using
System.Web.UI.WebControls.WebParts;
using
System.Web.UI.HtmlControls;
namespace
UploadPicture {
public
partial
class
_Default : System.Web.UI.Page {
//
この変数が変更に使用されるときのデフォルト値.例えば、自分の顔をアップロードし、ユーザーが顔を修正すれば、元の顔を表示することができます.
public
string
pic
=
"
http://www.svnhost.cn/images/logo.gif
"
;
protected
void
Page_Load(
object
sender, EventArgs e) { }
protected
void
Button1_Click(
object
sender, EventArgs e) { Random r
=
new
Random();
//
これにより、複数のファイルを同時にアップロードできます.フロントにはすでにファイル形式の判断があり、エラーメッセージがありました.ここでは不正なファイルをフィルタリングすればいいので、ヒントは必要ありません.
for
(
int
i
=
0
; i
<
Request.Files.Count; i
++
) {
if
(Request.Files[i].ContentLength
>
0
) {
string
ex
=
System.IO.Path.GetExtension(Request.Files[i].FileName).ToLower();
if
(
"
.jpg.gif.png.bmp
"
.Contains(ex)) {
string
newFileName
=
DateTime.Now.ToString(
"
yyyyMMddHHmmss
"
)
+
r.Next(
100
,
999
).ToString()
+
ex;
//
ファイル名をデータベースに保存
//
xxxxxxxxxxxxxxxx
//
xxxxxxxxxxxxxxxx
Request.Files[i].SaveAs(Server.MapPath(newFileName)); pic
=
newFileName; } } } } } }