2. 程式人生 > >MVC表單上傳圖片

MVC表單上傳圖片

阿新 • • 發佈：2018-12-20
src view視圖 belle new web 頭像 return link info

View視圖 @using Model;
@model Us
@{
Layout = null;
}
@using (Html.BeginForm("Index", "Home", FormMethod.Get))
{
<span>用戶名:</span>
<input type="text" value="@ViewBag.name" name="name" />
<input type="submit" />
}
<!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width"/>
<title>Index</title>
<link href="~/BootstrapSouce/css/bootstrap.min.css" rel="stylesheet" />
<script src="~/BootstrapSouce/js/jquery.min.js"></script>
<script src="~/BootstrapSouce/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 按鈕觸發模態框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">添加用戶</button>
<!-- 模態框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="myModalLabel">添加用戶信息</h4>
</div>
<div class="modal-body">
@using (Html.BeginForm("addDo", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<table>
<tr>
<td>用戶名</td>
<td>@Html.TextBoxFor(n => n.Usname)</td>
</tr>
<tr>
<td>姓名</td>
<td>@Html.TextBoxFor(n => n.Uname)</td>
</tr>
<tr>
<td>用戶角色</td>
<td>@Html.TextBoxFor(n => n.Urole)</td>
</tr>
<tr>
<td>頭像</td>
<td><input id="file" type="file" name="file" /></td>
</tr>
</table>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
<button type="submit" id="SubmitAdd" class="btn btn-primary">提交更改</button>
</div>
} </div> </div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
<div>
<table class="table table-bordered table-striped ">
<thead>
<tr>
<th>用戶編號</th>
<th>用戶名</th>
<th>姓名</th>
<th>用戶角色</th>
<th>頭像</th>
<th>操作</th>
</tr>
</thead>
<tbody>
@foreach (var i in ViewBag.list)
{
<tr>
<td>@i.Uid</td>
<td>@i.Usname</td>
<td>@i.Uname</td>
<td>@i.Urole</td>
<td><img src="@i.Upicture" style="width:60px;height:70px;" /></td>
<td><a href="/Home/Del/@i.Uid">刪除</a></td>
</tr>
}
</tbody>
</table>
<ul class="pagination">
<li><a href="/Home/Index?pageindex=1&[email protected]">首頁</a></li>
@{
var s = ViewBag.pageindex;
if (s > 1)
{
s = ViewBag.pageindex - 1;
}
else
{
s = 1;
}
}
<li><a href="/Home/Index?pageindex=@s&[email protected]">上一頁</a></li>
<li>
@{
for (int i = 1; i <= ViewBag.count; i++)
{
<a href="/Home/Index?pageindex=@i&[email protected]">@i</a>
}
}
</li>
@{
var x = ViewBag.pageindex;
if (x < ViewBag.count)
{
x = ViewBag.pageindex + 1;
}
else
{
x = ViewBag.count;
}
}
<li><a href="/Home/Index?pageindex=@x&[email protected]">下一頁</a></li>
<li><a href="/Home/[email protected]&[email protected]">尾頁</a></li>
</ul>
<a href="#">當前頁:@ViewBag.pageindex 總頁碼:@ViewBag.count</a>
</div>
</body>
</html> 技術分享圖片

查詢功能 這個小Demo引用了Bootstrap樣式

技術分享圖片

添加用了模態框

技術分享圖片

顯示

技術分享圖片

分頁

Controller控制器

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Model;
using BLL;
using Newtonsoft.Json; namespace WebApplication1.Controllers
{
public class HomeController : Controller
{
UsBLL bll = new UsBLL(); // GET: Home
public ActionResult Index(int pageindex = 1, string name = "")
{
int pagesize = 3, count; if (name == "")
{
ViewBag.list = bll.SelAllShow(pageindex, pagesize, out count, "");
ViewBag.name = name;
ViewBag.pageindex = pageindex;
ViewBag.count = count / pagesize + (count % pagesize == 0 ? 0 : 1);
}
else
{
ViewBag.list = bll.SelAllShow(pageindex, pagesize, out count, name);
ViewBag.name = name;
ViewBag.pageindex = pageindex;
ViewBag.count = count / pagesize + (count % pagesize == 0 ? 0 : 1);
}
return View();
} public ActionResult addDo(Us m, HttpPostedFileBase file)
{
if (file == null)
{
return Content("<script>alert(‘請重新選擇上傳文件!‘);location.href=‘/Home/Index‘;</script>");
}
string path = Request.MapPath("/img/") + System.IO.Path.GetFileName(file.FileName);
file.SaveAs(path);
m.Upicture = "/img/" + System.IO.Path.GetFileName(file.FileName); if (bll.Add(m)>0)
{
return Content("<script>alert(‘添加成功!‘);location.href=‘/Home/Index‘;</script>");
}
else
{
return Content("<script>alert(‘添加失敗!‘);location.href=‘/Home/Index‘;</script>");
}
}
/// <summary>
/// 刪除方法
/// </summary>
/// <param name="id"></param>
/// <returns></returns>
public ActionResult Del(int id)
{
if (bll.Del(id)>0)
{
return Content("<script>alert(‘刪除成功!‘);location.href=‘/Home/Index‘;</script>");
}
else
{
return Content("<script>alert(‘刪除失敗!‘);location.href=‘/Home/Index‘;</script>");
}
}
}
} 技術分享圖片

技術分享圖片

MVC表單上傳圖片

相關推薦

MVC表單上傳圖片

src view視圖 belle new web 頭像 return link info View視圖 @using Model;@model Us@{ Layout = null;}@using (Html.BeginForm("Index", "Home", F

ios form表單上傳圖片

1.使用微博開發的一個“傳送帶圖片微博”的介面來測試，這是介面地址，這裡面明確說明需要使用multipart/form-data格式提交圖片。關於使用微博開放平臺api、授權之類的就不說了。 2.multipart/from-data是一種進行表單提交時的訊息格式。表單提交資料的時候，預設型別是

七牛ajax模擬表單上傳圖片

<form method="post" action="http://up-z2.qiniup.com/" enctype="multipart/form-data"> <input name="token" type="hidden" id="qiniu_t

Spring Mvc表單上傳404錯誤

404錯誤是找不到檔案 500是邏輯錯誤 以下是我的表單提交 <form action="${pageContext.request.contextPath }/FirstController.6b" method="post" enctype="multipart/for

java form表單上傳圖片

主要通過java後臺直接向微信伺服器上傳本地圖片，直接上程式碼： import java.io.File; import java.io.FileInputStream; import java.io.IOException; import java.io.I

使用form-data表單上傳圖片

這是參考的大神的文章，連結忘了，這是很早的參考文章寫出來的。只需改動幾個地方，就OK public class FileImageUpload { private static final String TAG = “uploadFile”; pr

Form表單上傳圖片,PHP接收

Form 上傳圖片，PHP接收 在From中新增 enctype="multipart/form-data" <form action="/interview/addTutor" me

php 圖片上傳之利用form表單上傳

idt cti contain 開啟 1.7 png ret 選擇圖片 post 、利用form表單上傳此種方式是最原始的上傳方式，前端就是簡單的form表單，後端我們有PHP處理傳輸過來的文件。首先看前端的代碼 upload.html 1 2 3 4

java模擬表單上傳檔案，java通過模擬post方式提交表單實現圖片上傳功能例項

package com.zdz.httpclient;import java.io.BufferedReader;import java.io.DataInputStream;import java.io.DataOutputStream;import java.io.File;import java.io.

Android 模擬表單上傳 多圖片上傳

關鍵程式碼 //private List<String> mPictureList; //private String mRealName; //private String mUserCity; //private String mInv

圖片、檔案表單上傳以及非同步上傳

這次專案用到了圖片和檔案上傳到後臺，剛開始用的form表單，但是有一點不好的，就是點選上傳後會跳轉到action頁面，使用者體驗非常不舒服，所以就改為用ajax非同步上傳，現把我的心得上傳如下： 1、form表單 <form action="http://localh

SpringMVC表單上傳文件+表單數據

使用 req pojo 提交表單 tps param servlet tip 表單 本次遇到的需求是：在用戶提交表單數據的時候，同時上傳文件。並且表單數據傳到後臺可以組成一個pojo controller層的方法定義如下： public Object apply(HttpS

form表單上傳域（type="file"）的使用----上傳文件

ctype 頁面 web sdi fff public exce res substr 一，單個文件的上傳 1.html/jsp頁面 <%@ page language="java" contentType="text/html; charset=UTF-8"

form表單上傳文件

clas OS form表單 文件的 nbsp post 上傳 div type 註意form表單上傳文件的時候，要加上 enctype這個屬性 form表單上傳文件

表單上傳文件，asp.net mvc5

copy sel RF 表單上傳 string block sharp wid syn .forFlow ul li { display: inline-block; background-color: #99CCFF; font-size: 20px; line-heig

七牛雲實現表單上傳

表單上傳適用於檔案內容可以在一次 HTTP 請求即可傳遞完成的場景。該功能非常適合在瀏覽器中使用 HTML 表單上傳資源，或者在不需要處理複雜情況的客戶端開發中使用。如果檔案較大（大於 1GB），或者網路環境較差，可能會導致 HTTP 連線超時而上傳失敗。若發生這種情況，您需要考慮換用更安全的分片上

form表單上傳檔案

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

ajax上傳檔案 基於jquery form表單上傳檔案

<script src="/static/js/jquery.js"></script><script> $("#reg-btn").click(function () { // 1. 取到使用者填寫的資料 var for

Spring MVC利用Ajax上傳圖片

html <input type="file" onchange="imageUpload(this)" class="form-control" placeholder="點選按鈕選擇圖片"id="pictureUpload"> Ajax function imageU

EXT.JS2.2表單上傳檔案

var uploadFile = new Ext.form.TextField({ fieldLabel: '上傳檔案', id:'file', name: 'uploadFile', height