收藏

下载资源 加入VIP,免费下载

第1页 / 共24页

第2页 / 共24页

第3页 / 共24页

第4页 / 共24页

第5页 / 共24页

第6页 / 共24页

第7页 / 共24页

第8页 / 共24页

第9页 / 共24页

第10页 / 共24页

第11页 / 共24页

第12页 / 共24页

第13页 / 共24页

第14页 / 共24页

第15页 / 共24页

第16页 / 共24页

第17页 / 共24页

第18页 / 共24页

第19页 / 共24页

第20页 / 共24页

13

14

15

<%=Html.LabelFor（model=>model.性別）%>

16

17

18

<%=Html.RadioButton（"性別",true,new{id="男"}）%>男

19

<%=Html.RadioButton（"性別",false,new{id="女"}）%>女

20

21

22

23

24

<%=Html.LabelFor（model=>model.照片）%>

25

<%=Html.UploadImage（）%>

26

27

28

29

30

31

<%}%>

新增的View很簡單，幾乎都是用工具產出來的，重要的只有25行，擴充了HtmlHelper的方法，方法內容如下

01

publicstaticclassUploadImageHelper

02

{

03

publicstaticstringUploadImage（thisHtmlHelperhelper）

04

{

05

stringid=Guid.NewGuid（）.ToString（）;

06

07

StringBuildersb=newStringBuilder（）;

08

09

//這段是在準備圖片上傳完的圖片資訊及上傳狀態

10

sb.AppendLine（"上傳"）;

11

sb.AppendLine（""）;

12

sb.AppendLine（""）;

13

//========================================

14

15

//下面這段是在寫出SWFUpload所需的javascript

16

sb.AppendLine（""）;

17

sb.AppendLine（"varswfu_"+id.Replace（"-",""）+";"）;

18

sb.Append（"$（function（）{"）;

19

sb.Append（"swfu_"+id.Replace（"-",""）+"=newSWFUpload（{"）;

20

sb.Append（"upload_url:

'/Home/UploadImage',"）;

21

sb.Append（"file_post_name:

'Filedata',"）;

22

sb.Append（"post_params:

{"）;

23

sb.Append（"'id':

'"+id+"'},"）;

24

sb.Append（"file_size_limit:

'10MB',"）;

25

sb.Append（"file_types:

'*.jpg;*.png;*.jpeg;*.gif;*.bmp',"）;

26

//======================================

27

//綁定事件

28

sb.Append（"file_dialog_complete_handler:

fileDialogComplete,"）;

29

sb.Append（"upload_progress_handler:

uploadProgress,"）;

30

sb.Append（"upload_error_handler:

uploadError,"）;

31

sb.Append（"upload_success_handler:

UploadImageSuccess,"）;

32

//==========================================

33

//上傳按鈕的資訊============================

34

sb.Append（"button_image_url:

'/Scripts/btn_upload_1.png',"）;

35

sb.Append（"button_placeholder_id:

'"+id+"_btn-upload',"）;

36

sb.Append（"button_width:

95,"）;

37

sb.Append（"button_height:

24,"）;

38

sb.Append（"button_text:

'上傳圖片',"）;

39

sb.Append（"button_text_style:

'.button{font-family:

Helvetica,Arial,sans-serif;font-size:

12pt;text-align:

center;}',"）;

40

sb.Append（"button_text_top_padding:

1,"）;

41

sb.Append（"button_text_left_padding:

5,"）;

42

sb.Append（"button_window_mode:

'transparent',"）;

43

sb.Append（"flash_url:

'/Scripts/swfupload.swf',"）;

44

//============================================

45

sb.AppendLine（"debug:

false}）;}）"）;

46

sb.AppendLine（""）;

47

//下面這行是上傳後預覽的圖片tag

48

sb.AppendLine（"

5px;display:

none;'/>"）;

49

sb.AppendLine（""）;

50

returnsb.ToString（）;

51

}

52

}

由於都是組字串，所以可能不太好懂，但基本上都可以在文件都可以找到

不外乎就是一些上傳檔案大小的設定，按鈕的設定，完成或失敗時所要執行的function

重要的是第31行，當上傳成功時執行UploadImageSuccess這個function，

20-23行Post的路徑，及參數FileData跟id

以及10-12行，與48行自行設定的資訊

用好之後，把include的的檔案用一用，執行之後，就會出現下面的頁面

按了之後，就可以選檔案了，不過後端也必須要接才行

我設定的Post的路徑是在/Home/UploadImage

程式如下

01

[HttpPost]

02

publicActionResultUploadImage（stringid,HttpPostedFileBaseFiledata）

03

{

04

//new一個自訂的物件ImageData，供等下傳Json出去用

05

ImageDataimgData=newImageData（）{ID=id,status="0"};

06

07

//判斷否有檔案，及圖檔的附檔明有沒有符合

08

if（Filedata!

=null&&

09

Regex.IsMatch（Path.GetExtension（Filedata.FileName）,"^[.]（jpg|png|jpeg|gif|bmp）$",RegexOptions.IgnoreCase））

10

{

11

//先將圖片存在tempFile這個暫存的資料夾

12

stringtmpPath=Server.MapPath（"~/tempFile"）;

13

14

//當資料夾不存在時，建立此資料夾

15

if（!

Directory.Exists（tmpPath））

16

Directory.CreateDirectory（tmpPath）;

17

18

//將檔案存檔

19

tmpPath=Path.Combine（tmpPath,imgData.ID+Path.GetExtension（Filedata.FileName））;

20

Filedata.SaveAs（tmpPath）;

21

22

//將路徑資訊跟狀態指到物件中

23

imgData.imgSrc="/tempFile/"+imgData.ID+Path.GetExtension（Filedata.FileName）;

24

imgData.status="1";

25

}

26

//傳回Json格式

27

returnJson（imgData）;

28

}

自訂的物件

1

classImageData

2

{

3

publicstringimgSrc{get;set;}

4

publicstringimgName{get;set;}

5

publicstringID{get;set;}

6

publicstringstatus{get;set;}

7

}

還記得剛剛在設定上傳成功時要去執行UploadImageSuccess這個function嗎

SWFload範例有附一些function，但為了需要所以我修改了這個function

01

functionUploadImageSuccess（file,serverData）{

02

varretVal=eval（'（'+serverData+'）'）;

03

if（retVal.status=='1'）{

04

$（'#上傳狀態'）.html（'上傳成功：

'+file.name）;

05

$（'#picName'）.val（retVal.imgSrc）;

06

$（'#tmp_img'）.attr（'src',retVal.imgSrc）.show（）;

07

//下面是裁圖的jQuery========

08

$（'#tmp_img'）.Jcrop（{

09

setSelect:

[0,0,250,250],

10

onSelect:

updateCoords

11

}）;

12

//===========================

13

}

14

else{

15

$（'#上傳狀態'）.html（'上傳失敗!

'）;

16

}

17

}

function內容滿簡單的，先判斷狀態如果是1代表上傳成功

在先前的helper中已經訂好的id名稱一一對上

id="上傳成功"的內容放入上傳成功及檔名

id="picName"是一個隱藏欄位，放暫存圖片的路徑

id="tmp_img"將src的值改為暫存圖片的路徑

7-11行是裁圖的jQuery等等再說

完成之後，點上傳檔案選擇完檔案之後，就可以看到成果啦

突然覺得篇幅太長，分成上下兩篇好了。

下

functionUploadImageSuccess（file,serverData）{

02

varretVal=eval（'（'+serverData+'）'）;

03

if（retVal.status=='1'）{

04

$（'#上傳狀態'）.html（'上傳成功：

'+file.name）;

05

$（'#picName'）.val（retVal.imgSrc）;

06

$（'#tmp_img'）.attr（'src',retVal.imgSrc）.show（）;

07

//下面是裁圖的jQuery========

08

$（'#tmp_img'）.Jcrop（{

09

setSelect:

[0,0,250,250],

10

onSelect:

updateCoords

11

}）;

12

//===========================

13

}

14

else{

15

$（'#上傳狀態'）.html（'上傳失敗!

'）;

16

}

17

}

我只設定了setSelect，代表初始的框框大小及位置

與onSelect，代表選取時去執行updateCoords這個function

下面貼完整的View出來

01

02

//選取時執行的function

03

functionupdateCoords（c）{

04

jQuery（'#X'）.text（c.x）;

05

jQuery（'#Y'）.text（c.y）;

06

jQuery（'#W'）.text（c.w）;

07

jQuery（'#H'）.text（c.h）;

08

jQuery（'#picX'）.val（c.x）;

09

jQuery（'#picY'）.val（c.y）;

10

jQuery（'#picW'）.val（c.w）;

11

jQuery（'#picH'）.val（c.h）;

12

13

};

14

15

Create

16

17

<%using（Html.BeginForm（））{%>

18

48

<%--隱藏欄位，要傳左上角座標及寬高到後端--%>

49

50

51

52

53

<%}%>

54

55

加上上方的程式碼後，在圖片上傳完後，就可以看到下面的效果

可以自由的調整框框大小。

上方也會顯示出現在的位置及寬高

終於到最後一步，新增該筆資料啦，將資料打完，圖片上傳好後

按下Create，在後端寫好對應的Action如下

01

[HttpPost]

02

publicActionResultCreate（SWFandCropdata,stringpicName,intpicX,intpicY,intpicW,intpicH）

03

{

04

//利用路徑開啟這個圖檔

05

System.Drawing.Imageimage=Bitmap.FromFile（Server.MapPath（"~"）+picName）;

06

07

//下面就是裁圖的程式，短短幾行

08

Bitmapbmp=ne