基於WebUploader的圖片上傳

風靈使發表於2018-09-11

UploadController.cs

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace WebApplication.Controllers
{
    /// <summary>
    /// 基於WebUploader外掛的圖片上傳例項
    /// </summary>
    public class UploadController : Controller
    {
        // GET: Upload
        public ActionResult Index()
        {
            return View();
        }

        /// <summary>
        /// 直接上傳
        /// </summary>
        /// <returns></returns>
        public ActionResult Upload()
        {
            return View();
        }

        /// <summary>
        /// 簡單上傳
        /// </summary>
        /// <returns></returns>
        public ActionResult SimpleUpload()
        {
            return View();
        }

        /// <summary>
        /// 模態框上傳
        /// </summary>
        /// <returns></returns>
        public ActionResult ModalUpload()
        {
            return View();
        }

        /// <summary>
        /// 上傳檔案方法
        /// </summary>
        /// <param name="form">表單引數</param>
        /// <param name="file">檔案</param>
        /// <returns></returns>
        [HttpPost]
        public ActionResult UploadImg(FormCollection form, HttpPostedFileBase file)
        {
            try
            {
                string filePathName = string.Empty;
                string localPath = string.Empty;
                string imagePath = string.Empty;


                imagePath = "/Upload/Images/User/";
                localPath = Path.Combine(HttpRuntime.AppDomainAppPath, "Upload/Images/");

                if (Request.Files.Count == 0)
                {
                    throw new Exception("請選擇上傳檔案！");
                    //return Json(new JsonResultModel(-1,"請選擇上傳檔案",null));
                }

                string ex = Path.GetExtension(file.FileName);

                filePathName = Guid.NewGuid().ToString("N") + ex;
                if (!System.IO.Directory.Exists(localPath))
                {
                    System.IO.Directory.CreateDirectory(localPath);
                }
                file.SaveAs(Path.Combine(localPath, filePathName));

                // string imgAddress = Request.Url.GetLeftPart(UriPartial.Authority) + imagePath + filePathName;
                string imgAddress = imagePath + filePathName;
                return Json(new
                {
                    Status = 200,
                    Message = "上傳圖片成功！",
                    Data = imgAddress
                });
            }
            catch (Exception)
            {
                //扔出異常
                throw;
            }

        }

    }
}

Upload.cshtml

@{
    ViewBag.Title = "WebUploader上傳例項";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<!--單獨模組-->
<!--上傳圖片-->
<div id="wrapper">
    <div id="container">
        <div id="uploader">
            <div class="queueList">
                <div id="dndArea" class="placeholder">
                    <div id="filePicker"></div>
                    <p>或將照片拖到這裡，並支援截圖貼上功能</p>
                </div>
            </div>
            <div class="statusBar" style="display:none;">
                <div class="progress">
                    <span class="text">0%</span>
                    <span class="percentage"></span>
                </div><div class="info"></div>
                <div class="btns">
                    <div id="filePicker2"></div>
                    <div class="uploadBtn">開始上傳</div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(function () {
        var callback = function (response) {
            if (response.Status == 200) {
                new PNotify({ title: "成功！", text: response.Message, type: 'success' });// 此處使用了Pnotify 外掛== alert
            } else {
                new PNotify({ title: "失敗！", text: response.Message, type: 'error' });
            }
        }

        _init_upload(callback);//初始化上傳外掛

    });
</script>

SimpleUpload.cshtml

@{
    ViewBag.Title = "WebUploader上傳例項";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<!--簡單模組-->
<div class="container form-horizontal">
    <div class="row form-group">
        <label class="control-label  col-lg-3 col-md-3">圖片地址</label>
        <div class="col-lg-5 col-md-6">
            <input class="form-control" name="askImage" id="askImage" disabled="disabled" style="max-width:100%;" />
        </div>
        <div id="uploadImg">上傳圖片</div>
        @*<button type="button" class="btn btn-primary">上傳圖片</button>*@
    </div>
    <div id="fileList" class="uploader-list  wu-example"></div>
</div>
<script>
    $(function () {
        //Test
        _init_simpleUpload();//初始化上傳方法
    })
</script>

ModalUpload.cshtml


@{
    ViewBag.Title = "ModalUpload";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<!--模態框 單獨模組-->
<div id="imgModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" style="width: 900px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">上傳圖片</h4>
            </div>
            <div class="modal-body model-scroll" style="max-height: 500px;">
                <!--上傳圖片start-->
                <div id="wrapper">
                    <div id="container">
                        <div id="uploader">
                            <div class="queueList">
                                <div id="dndArea" class="placeholder">
                                    <div id="filePicker"></div>
                                    <p>或將照片拖到這裡，並支援截圖貼上功能</p>
                                </div>
                            </div>
                            <div class="statusBar" style="display: none;">
                                <div class="progress">
                                    <span class="text">0%</span>
                                    <span class="percentage"></span>
                                </div>
                                <div class="info"></div>
                                <div class="btns">
                                    <div id="filePicker2"></div>
                                    <div class="uploadBtn">開始上傳</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--上傳圖片end-->
            </div>
        </div>
    </div>
</div>
<button id="openUpload" type="button" class="btn btn-primary" data-toggle="modal" data-target="#imgModal">上傳圖片</button>
<script>
    $(function () {
        var callback = function (response) {
            if (response.Status == 200) {
                new PNotify({ title: "成功！", text: response.Message, type: 'success' });// 此處使用了Pnotify 外掛== alert
            } else {
                new PNotify({ title: "失敗！", text: response.Message, type: 'error' });
            }
        };


        //開啟模態框-初始化圖片外掛
        $('#imgModal').on('shown.bs.modal', function () {
            _init_upload(callback);
        });
        //關閉模態框-銷燬物件
        $('#imgModal').on('hidden.bs.modal', function () {
            if (typeof (uploader) != "undefined") {
                uploader._destroy();
            }
        });
    });
</script>

_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebUpload上傳例項</title>
    <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
    @*<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />*@
    <script src="~/Scripts/modernizr-2.6.2.js"></script>
    <!--圖片上傳例項樣式 start-->
    <link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link href="../vendors/webuploader-0.1.5/webuploader.css" rel="stylesheet" />
    <link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
    <link href="../vendors/pnotify/dist/pnotify.custom.min.css" rel="stylesheet" />
    <link href="../vendors/webuploader-0.1.5/style_simple.css?v=1" rel="stylesheet" />
    <link href="~/vendors/custom/css/custom_ask.css" rel="stylesheet" />
    <script src="../vendors/jquery/dist/jquery.min.js"></script>
    <!--圖片上傳例項樣式 end-->
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/Upload/Index">首頁</a>
                <a class="navbar-brand" href="/Upload/Upload">直接上傳</a>
                <a class="navbar-brand" href="/Upload/SimpleUpload">簡單上傳</a>
                <a class="navbar-brand" href="/Upload/ModalUpload">模態框上傳</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav"></ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>
    <!--圖片上傳例項樣式 JS start-->
    <script src="../vendors/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="../vendors/webuploader-0.1.5/webuploader.min.js"></script>
    <script src="../vendors/pnotify/dist/pnotify.custom.min.js"></script>
    <script src="../vendors/webuploader-0.1.5/upload.js?v=2"></script><!--直接上傳或模態框上傳使用-->
    <script src="~/vendors/webuploader-0.1.5/upload_simple.js"></script><!--簡單上傳使用-->
    <script src="~/vendors/custom/js/custom.js"></script><!--無關緊要的JS-->
    <!--圖片上傳例項樣式 JS end-->
</body>
</html>

執行效果如圖:

這裡寫圖片描述

php+WebUploader圖片批量上傳
2019-05-05
PHPWeb
基於SpringMVC的上傳圖片
2019-02-21
SpringMVC
基於cropper.js的圖片上傳和裁剪
2020-04-05
JS
基於Web3.0的區塊鏈圖片上傳
2024-06-17
Web區塊鏈
基於uni-app圖片上傳JS外掛
2019-04-13
APPJS
基於.net core 七牛雲上傳多圖片
2024-05-17
踩坑Webuploader視訊上傳
2019-03-02
Web
利用webuploader外掛上傳圖片檔案,完整前端示例demo,服務端使用SpringMVC接收
2019-05-17
Web前端服務端SpringMVC
上傳圖片
2024-11-06
基於業務場景下的圖片/檔案上傳方案總結
2020-10-26
微信小程式基於騰訊雲物件儲存的圖片上傳
2018-03-19
微信小程式物件
PbootCMS上傳圖片變模糊、上傳圖片尺寸受限的解決方案
2024-11-10
boot
electron上傳圖片
2020-10-19
上傳圖片js
2024-08-19
JS
裁剪上傳圖片
2023-03-02
圖片上傳及圖片處理
2019-03-22
java，springboot + thymeleaf 上傳圖片、刪除圖片到伺服器、本地，壓縮圖片上傳(有些圖片會失真)，原圖上傳
2020-12-06
JavaSpring Boot伺服器
基於vue + axios + lrz.js 微信端圖片壓縮上傳
2019-06-24
VueiOSJS
多圖片formpost上傳
2018-09-11
ORM
spring boot 圖片上傳
2024-03-06
Spring Boot
測試圖片上傳
2024-11-12
input file圖片上傳
2018-04-24
本地Markdown上傳圖片
2021-05-16
ci框架中的圖片上傳
2019-02-16
框架
mino如何上傳同名的圖片
2024-08-09
基於Spring Boot實現圖片上傳/加水印一把梭操作
2018-11-15
Spring Boot
上傳圖片以及做成縮圖
2020-04-07
vue 上傳圖片進行壓縮圖片
2020-09-25
Vue
Ueditor 上傳圖片自動新增水印(只能上傳圖片，上傳檔案報錯)
2018-07-04
Java實現圖片上傳到伺服器，並把上傳的圖片讀取出來
2019-04-26
Java伺服器
js上傳圖片壓縮
2019-02-16
JS
圖片上傳方案詳解
2019-02-16
vue圖片預覽上傳
2018-07-18
Vue
springboot+wangEditor圖片上傳
2018-07-29
Spring Boot
js圖片上傳預覽
2018-03-15
JS
通用mapper、圖片上傳、nginx
2018-03-15
APPNginx
Laravel 使用 FastDFS 上傳圖片
2020-05-04
LaravelAST
koa 圖片上傳詳解
2019-12-21

基於WebUploader的圖片上傳

UploadController.cs

Upload.cshtml

SimpleUpload.cshtml

ModalUpload.cshtml

_Layout.cshtml

執行效果如圖:

相關文章