縮小後上傳圖片(ajax+webservice)

最後更新：2018-12-06 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

參考：

ajax+webservice 非同步無重新整理上傳圖片：http://www.cnblogs.com/nianming/archive/2012/04/29/2476104.html

圖片縮放後上傳：http://weblogs.asp.net/markmcdonnell/archive/2008/03/09/resize-image-before-uploading-to-server.aspx

外掛程式： http://jquery.malsup.com/form/

切割圖片以後有時間再結合這個例子，實現先切割，後縮放上傳。

暫時沒有找到上傳前可預覽（相容所有瀏覽器）的方法。

代碼如下：

UploadImage.ashx

using System;using System.Collections.Generic;using System.Drawing;using System.Drawing.Drawing2D;using System.IO;using System.Linq;using System.Web;namespace WebService{    /// <summary>    /// Summary description for UploadImage    /// </summary>    public class UploadImage : IHttpHandler    {        public void ProcessRequest(HttpContext context)        {            context.Response.ContentType = "text/plain";            HttpPostedFile file = context.Request.Files[0];            Stream stream = file.InputStream;            if (file != null)            {                try                {                    if (!Directory.Exists(context.Server.MapPath(@"Uploaded-Files")))                    {                        Directory.CreateDirectory(context.Server.MapPath(@"Uploaded-Files"));                    }                    //圖片儲存的檔案夾路徑                    string path = context.Server.MapPath("~/Uploaded-Files/");                    //每天上傳的圖片一個檔案夾                    string folder = DateTime.Now.ToString("yyyyMMdd");                    //如果檔案夾不存在，則建立                    if (!Directory.Exists(path + folder))                    {                        Directory.CreateDirectory(path + folder);                    }                    //上傳圖片的副檔名                    string type = file.FileName.Substring(file.FileName.LastIndexOf('.'));                    //儲存圖片的檔案名稱                    string saveName = Guid.NewGuid().ToString() + type;                    //儲存圖片                    Bitmap originalBMP = new Bitmap(stream);                    double origWidth = originalBMP.Width;                    double origHeight = originalBMP.Height;                    double sngRatio = origWidth / origHeight;                    int thumbnailSize = 250;                    int newWidth, newHeight;                    if (originalBMP.Width > originalBMP.Height)                    {                        newWidth = thumbnailSize;                        newHeight = originalBMP.Height * thumbnailSize / originalBMP.Width;                    }                    else                    {                        newWidth = originalBMP.Width * thumbnailSize / originalBMP.Height;                        newHeight = thumbnailSize;                    }                    Bitmap newBMP = new Bitmap(originalBMP, newWidth, newHeight);                    Graphics oGraphics = Graphics.FromImage(newBMP);                    oGraphics.SmoothingMode = SmoothingMode.AntiAlias;                    oGraphics.InterpolationMode = InterpolationMode.HighQualityBicubic;                    oGraphics.DrawImage(originalBMP, 0, 0, newWidth, newHeight);                    newBMP.Save(path + folder + "/" + saveName);                    originalBMP.Dispose();                    newBMP.Dispose();                    oGraphics.Dispose();                                     context.Response.Write(folder + "/" + saveName);                }                catch                {                    context.Response.Write("上傳失敗");                }            }        }        public bool IsReusable        {            get            {                return false;            }        }    }}

WebForm2.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebService.WebForm2" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    <title></title>    <script type="text/javascript" src="/Scripts/jquery-1.6.2.min.js"></script>    <script type="text/javascript" src="/Scripts/jquery.form.js"></script>    <script type="text/javascript">        $(function () {            var wait = $("<img src=\"images/wait.gif\" alt=\"正在上傳\"/>");            $('#<%=fileUpload.ClientID%>').change(function () {                $("#form1").ajaxSubmit({                    url: 'UploadImage.ashx',                    beforeSubmit: function () {                        $("#upload").append(wait);                        $("#upload img").css("display", "inline");                    },                    success: function (data) {                        $("#upload img").fadeOut(2000);                        console.log('data'+data);                        if (data != "上傳失敗") {                            $("#previewImage").attr("src", "Uploaded-Files/" + data).hide().fadeIn(2000);                        }                        else {                            alert("上傳失敗");                        }                    }                });            });        });    </script></head><body>    <form id="form1" runat="server">    <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>    <div>        <asp:FileUpload ID="fileUpload" runat="server" />                <div id="preview">            <img id="previewImage" src="images/nopic.jpg" alt="暫無圖片" />       </div>    </div>    </form></body></html>

.net使用request.files來表示從用戶端回傳來的檔案。
它的屬性有
request.files.count表示上傳了幾個檔案。
用request.files[]就表示原先的 file控制項名。所以request.files的屬性就是file控制項的屬性。
httppostedfile表示回傳的檔案類。因為我們可能要建立一個對象去代表回傳的對象。此時可以用
HttpPostedFile f=Request.Files[n];

<input id="File1" type="file" runat="server" />

HttpPostedFile f = Request.Files[0];f.SaveAs(Server.MapPath("001.jpg"));

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More