用MVC上传图片以及载图功能Word文件下载.docx
《用MVC上传图片以及载图功能Word文件下载.docx》由会员分享，可在线阅读，更多相关《用MVC上传图片以及载图功能Word文件下载.docx（24页珍藏版）》请在冰点文库上搜索。
16
imgsrc="
%=Url.Content（item.照片）%>
"
alt="
style="
width:
100px;
height:
/>
17
18
%}%>
19
/table>
20
p>
新增一筆資料"
Create"
）%>
/p>
注意一下第16行，圖片的路徑，以及我有固定圖片的寬高
再來開始寫新增的程式碼及View
%using（Html.BeginForm（））{%>
fieldset>
legend>
Fields<
/legend>
divclass="
editor-label"
>
%=Html.LabelFor（model=>
model.姓名）%>
/div>
editor-field"
%=Html.TextBoxFor（model=>
%=Html.ValidationMessageFor（model=>
model.性別）%>
%=Html.RadioButton（"
性別"
true,new{id="
男"
}）%>
labelfor="
男<
/label>
false,new{id="
女"
女<
21
22
23
24
model.照片）%>
br/>
25
%=Html.UploadImage（）%>
26
27
28
inputtype="
submit"
value="
/>
29
30
/fieldset>
31
新增的View很簡單，幾乎都是用工具產出來的，重要的只有25行，擴充了HtmlHelper的方法，方法內容如下
publicstaticclassUploadImageHelper
{
publicstaticstringUploadImage（thisHtmlHelperhelper）
stringid=Guid.NewGuid（）.ToString（）;
StringBuildersb=newStringBuilder（）;
//這段是在準備圖片上傳完的圖片資訊及上傳狀態
sb.AppendLine（"
divclass='
uploadContainer'
spanid='
+id+"
_btn-upload'
class='
Button_Upload'
上傳<
/span>
）;
上傳狀態'
inputtype='
hidden'
id='
picName'
name='
value='
'
//========================================
//下面這段是在寫出SWFUpload所需的javascript
scripttype='
text/javascript'
varswfu_"
+id.Replace（"
-"
）+"
;
sb.Append（"
$（function（）{"
swfu_"
=newSWFUpload（{"
upload_url:
'
/Home/UploadImage'
file_post_name:
Filedata'
post_params:
{"
id'
:
},"
file_size_limit:
10MB'
file_types:
*.jpg;
*.png;
*.jpeg;
*.gif;
*.bmp'
//======================================
//綁定事件
file_dialog_complete_handler:
fileDialogComplete,"
upload_progress_handler:
uploadProgress,"
upload_error_handler:
uploadError,"
upload_success_handler:
UploadImageSuccess,"
32
//==========================================
33
//上傳按鈕的資訊============================
34
button_image_url:
/Scripts/btn_upload_1.png'
35
button_placeholder_id:
36
button_width:
95,"
37
button_height:
24,"
38
button_text:
spanclass=\"
button\"
上傳圖片<
39
button_text_style:
.button{font-family:
Helvetica,Arial,sans-serif;
font-size:
12pt;
text-align:
center;
}'
40
button_text_top_padding:
1,"
41
button_text_left_padding:
5,"
42
button_window_mode:
transparent'
43
flash_url:
/Scripts/swfupload.swf'
"
44
//============================================
45
debug:
false}）;
}）"
46
/script>
"
47
//下面這行是上傳後預覽的圖片tag
48
imgid='
tmp_img'
src='
style='
padding-top:
5px;
display:
none;
49
50
returnsb.ToString（）;
51
}
52
由於都是組字串，所以可能不太好懂，但基本上都可以在文件都可以找到
不外乎就是一些上傳檔案大小的設定，按鈕的設定，完成或失敗時所要執行的function
重要的是第31行，當上傳成功時執行UploadImageSuccess這個function，
20-23行Post的路徑，及參數FileData跟id
以及10-12行，與48行自行設定的資訊
用好之後，把include的的檔案用一用，執行之後，就會出現下面的頁面
按了之後，就可以選檔案了，不過後端也必須要接才行
我設定的Post的路徑是在/Home/UploadImage
程式如下
[HttpPost]
publicActionResultUploadImage（stringid,HttpPostedFileBaseFiledata）
//new一個自訂的物件ImageData，供等下傳Json出去用
ImageDataimgData=newImageData（）{ID=id,status="
0"
};
//判斷否有檔案，及圖檔的附檔明有沒有符合
if（Filedata!
=null&
&
Regex.IsMatch（Path.GetExtension（Filedata.FileName）,"
^[.]（jpg|png|jpeg|gif|bmp）$"
RegexOptions.IgnoreCase））
//先將圖片存在tempFile這個暫存的資料夾
stringtmpPath=Server.MapPath（"
~/tempFile"
//當資料夾不存在時，建立此資料夾
if（!
Directory.Exists（tmpPath））
Directory.CreateDirectory（tmpPath）;
//將檔案存檔
tmpPath=Path.Combine（tmpPath,imgData.ID+Path.GetExtension（Filedata.FileName））;
Filedata.SaveAs（tmpPath）;
//將路徑資訊跟狀態指到物件中
imgData.imgSrc="
/tempFile/"
+imgData.ID+Path.GetExtension（Filedata.FileName）;
imgData.status="
1"
//傳回Json格式
returnJson（imgData）;
自訂的物件
1
classImageData
2
3
publicstringimgSrc{get;
set;
}
4
publicstringimgName{get;
5
publicstringID{get;
6
publicstringstatus{get;
7
還記得剛剛在設定上傳成功時要去執行UploadImageSuccess這個function嗎
SWFload範例有附一些function，但為了需要所以我修改了這個function
functionUploadImageSuccess（file,serverData）{
varretVal=eval（'
（'
+serverData+'
）'
if（retVal.status=='
1'
）{
$（'
#上傳狀態'
）.html（'
上傳成功：
+file.name）;
#picName'
）.val（retVal.imgSrc）;
#tmp_img'
）.attr（'
src'
retVal.imgSrc）.show（）;
//下面是裁圖的jQuery========
）.Jcrop（{
setSelect:
[0,0,250,250],
onSelect:
updateCoords
}）;
//===========================
else{
上傳失敗!
function內容滿簡單的，先判斷狀態如果是1代表上傳成功
在先前的helper中已經訂好的id名稱一一對上
id="
上傳成功"
的內容放入上傳成功及檔名
picName"
是一個隱藏欄位，放暫存圖片的路徑
tmp_img"
將src的值改為暫存圖片的路徑
7-11行是裁圖的jQuery等等再說
完成之後，點上傳檔案選擇完檔案之後，就可以看到成果啦
突然覺得篇幅太長，分成上下兩篇好了。
下
我只設定了setSelect，代表初始的框框大小及位置
與onSelect，代表選取時去執行updateCoords這個function
下面貼完整的View出來
scripttype="
text/javascript"
//選取時執行的function
functionupdateCoords（c）{
jQuery（'
#X'
）.text（c.x）;
#Y'
）.text（c.y）;
#W'
）.text（c.w）;
#H'
）.text（c.h）;
#picX'
）.val（c.x）;
#picY'
）.val（c.y）;
#picW'
）.val（c.w）;
#picH'
）.val（c.h）;
h2>
Create<
/h2>
%using（Html.BeginForm（））{%>
divclass="
labelfor="
br/>
%--顯示出目前框框的左上角座標及寬高--%>
X：
divid="
X"
Y：
Y"
寬：
W"
高：
H"
inputtype="
%--隱藏欄位，要傳左上角座標及寬高到後端--%>
hidden"
picX"
name="
picY"
picW"
picH"
53
54
55
div>
56
%=Html.ActionLink（"
BacktoList"
Index"
57
加上上方的程式碼後，在圖片上傳完後，就可以看到下面的效果
可以自由的調整框框大小。
上方也會顯示出現在的位置及寬高
終於到最後一步，新增該筆資料啦，將資料打完，圖片上傳好後
按下Create，在後端寫好對應的Action如下
publicActionResultCreate（SWFandCropdata,stringpicName,intpicX,intpicY,intpicW,intpicH）
//利用路徑開啟這個圖檔
System.Drawing.Imageimage=Bitmap.FromFile（Server.MapPath（"
~"
）+picName）;
//下面就是裁圖的程式，短短幾行
Bitmapbmp=ne
升级会员 