週末大放送網站圖片上傳，水印，預覽，截圖
週末閒著沒事，將網站中經常用到的對圖片的操作做了一個總結，方便以後回顧，這裡將一天的成果，貼出來，希望能幫到大家。
首先是swfupload方式的無重新整理上傳，關於怎麼配置，按照demo 的寫法，我相信只要你不是太笨，都能成功。
專案結構：
上傳程式碼：
前臺上傳頁面，你可以根據需要建html頁，也可以建webform。這裡用一般處理程式來對照片進行處理，加水印，修改檔名等操作。
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SWFUploadImage.aspx.csSWFUploadImage.aspx" Inherits="Wolfy.ImageWeb.SWFUploadImage" %> 2 3 <!DOCTYPE html> 4 5 <html xmlns="http://www.w3.org/1999/xhtml"> 6 <head id="Head1" runat="server"> 7 <title></title> 8 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 9 <script src="../SWFUpload/swfupload.js" type="text/javascript"></script> 10 <script src="../SWFUpload/handlers.js" type="text/javascript"></script> 11 <script src="../Script/jquery-1.7.1.js"></script> 12 <script type="text/javascript"> 13 var swfu; 14window.onload = function () { 15 swfu = new SWFUpload({ 16 // Backend Settings 17 upload_url: "/SWFUploadHandler.ashx",//交給一般處理程式來處理 18 post_params: { 19 "ASPSESSID": "<%=Session.SessionID %>" 20 }, 21 22 // File Upload Settings 23 file_size_limit: "2 MB", 24 file_types: "*.jpg;*.gif", 25 file_types_description: "JPG Images", 26 file_upload_limit: 0, // Zero means unlimited 27 28 // Event Handler Settings - these functions as defined in Handlers.js 29 // The handlers are not part of SWFUpload but are part of my website and control how 30 // my website reacts to the SWFUpload events. 31 swfupload_preload_handler: preLoad, 32 swfupload_load_failed_handler: loadFailed, 33 file_queue_error_handler: fileQueueError, 34 file_dialog_complete_handler: fileDialogComplete, 35 upload_progress_handler: uploadProgress, 36 upload_error_handler: uploadError, 37 upload_success_handler: Show,//這裡修改了方法的定義。 38 upload_complete_handler: uploadComplete, 39 40 // Button settings 41 button_image_url: "/SWFUpload/images/XPButtonNoText_160x22.png", 42 button_placeholder_id: "spanButtonPlaceholder", 43 button_width: 160, 44 button_height: 22, 45 button_text: '<span class="button">選擇上傳圖片 <span class="buttonSmall">(2 MB Max)</span></span>', 46 button_text_style: '.button { font-family: Helvetica, Arial, sans-serif; font-size: 14pt; } .buttonSmall { font-size: 10pt; }', 47 button_text_top_padding: 1, 48 button_text_left_padding: 5, 49 50 // Flash Settings 51 flash_url: "/SWFUpload/swfupload.swf", // Relative to this file 52 flash9_url: "/SWFUpload/swfupload_FP9.swf", // Relative to this file 53 54 custom_settings: { 55 upload_target: "divFileProgressContainer" 56 }, 57 58 // Debug Settings 59 debug: false 60 }); 61 } 62 //上傳成功以後執行該方法 63 function Show(file, serverData) { 64 var s = serverData.split(':');//接收從服務端返回的資料，按照分號分隔 65 66 if (s[0] == "ok") { 67 $("#imgSrc").attr("src", s[1]); 68 } 69 } 70 </script> 71 </head> 72 <body> 73 <form id="form1" runat="server"> 74 75 <div id="content"> 76 77 <div id="swfu_container" style="margin: 0px 10px;"> 78 <div> 79 80 <span id="spanButtonPlaceholder"></span> 81 82 </div> 83 84 <div id="divFileProgressContainer" style="height: 75px;"></div> 85 86 <img id="imgSrc" /> 87 </div> 88 </div> 89 </form> 90 </body> 91 </html>
1 using System; 2 using System.Collections.Generic; 3 using System.Drawing; 4 using System.IO; 5 using System.Linq; 6 using System.Web; 7 8 namespace Wolfy.ImageWeb 9 { 10 /// <summary> 11 /// SWFUploadHandler 的摘要說明 12 /// </summary> 13 public class SWFUploadHandler : IHttpHandler 14 { 15 16 public void ProcessRequest(HttpContext context) 17 { 18 context.Response.ContentType = "text/plain"; 19 HttpPostedFile file = context.Request.Files["Filedata"];//獲取上傳的檔案資料. 20 string fileName = Path.GetFileName(file.FileName);//獲取上傳檔案的名稱. 21 string fileExt = Path.GetExtension(fileName);//得到檔案的副檔名. 22 23 if (fileExt == ".jpg") 24 { 25 //將上傳的圖片放到不同的資料夾下.(根據日期) 26 string dir = "/UploadImage/" + DateTime.Now.Year + "/" + DateTime.Now.Month + "/" + DateTime.Now.Day + "/"; 27 Directory.CreateDirectory(Path.GetDirectoryName(context.Server.MapPath(dir)));//建立資料夾. 28 //檔案重新命名名字 29 string fullDir = dir + DateTime.Now.ToString("yyyyMMddhhmmss") + fileExt;//構建完整的檔案路徑. 30 file.SaveAs(context.Server.MapPath(fullDir)); 31 context.Response.Write("ok:" + fullDir); 32 33 34 } 35 } 36 37 public bool IsReusable 38 { 39 get 40 { 41 return false; 42 } 43 } 44 } 45 }SWFUploadHandler.ashx
預覽和截圖，水印程式碼(這裡將他們整合在一個頁面了，實在不想再建頁面，在配置swfupload)，截圖的時候，用到網上的一個jquery外掛（可變層，可移動層）
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CutPhoto.aspx.cs" Inherits="Wolfy.ImageWeb.CutPhoto1" %> 2 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head id="Head1" runat="server"> 5 <title></title> 6 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 7 <script src="../SWFUpload/swfupload.js" type="text/javascript"></script> 8 <script src="../SWFUpload/handlers.js" type="text/javascript"></script> 9 <script src="../Script/jquery-1.7.1.js"></script> 10 <script src="Script/jquery-ui-1.8.2.custom.min.js"></script> 11 <script type="text/javascript"> 12 var swfu; 13 window.onload = function () { 14 swfu = new SWFUpload({ 15 // Backend Settings 16 upload_url: "/CutPhoto.ashx?action=up",//交給一般處理程式來處理 17 post_params: { 18 "ASPSESSID": "<%=Session.SessionID %>" 19 }, 20 21 // File Upload Settings 22 file_size_limit: "2 MB", 23 file_types: "*.jpg;*.gif", 24 file_types_description: "JPG Images", 25 file_upload_limit: 0, // Zero means unlimited 26 27 // Event Handler Settings - these functions as defined in Handlers.js 28 // The handlers are not part of SWFUpload but are part of my website and control how 29 // my website reacts to the SWFUpload events. 30 swfupload_preload_handler: preLoad, 31 swfupload_load_failed_handler: loadFailed, 32 file_queue_error_handler: fileQueueError, 33 file_dialog_complete_handler: fileDialogComplete, 34 upload_progress_handler: uploadProgress, 35 upload_error_handler: uploadError, 36 upload_success_handler: Show,//這裡修改了方法的定義。 37 upload_complete_handler: uploadComplete, 38 39 // Button settings 40 button_image_url: "/SWFUpload/images/XPButtonNoText_160x22.png", 41 button_placeholder_id: "spanButtonPlaceholder", 42 button_width: 160, 43 button_height: 22, 44 button_text: '<span class="button">選擇上傳圖片 <span class="buttonSmall">(2 MB Max)</span></span>', 45 button_text_style: '.button { font-family: Helvetica, Arial, sans-serif; font-size: 14pt; } .buttonSmall { font-size: 10pt; }', 46 button_text_top_padding: 1, 47 button_text_left_padding: 5, 48 49 // Flash Settings 50 flash_url: "/SWFUpload/swfupload.swf", // Relative to this file 51 flash9_url: "/SWFUpload/swfupload_FP9.swf", // Relative to this file 52 53 custom_settings: { 54 upload_target: "divFileProgressContainer" 55 }, 56 57 // Debug Settings 58 debug: false 59 }); 60 } 61 var s; 62 //上傳成功以後執行該方法 63 function Show(file, serverData) { 64 s = serverData.split(':');//接收從服務端返回的資料，按照分號分隔 65 66 if (s[0] == "ok") { 67 //將服務端返回的圖片路徑作為外層DIV的背景。 68 //注意：backgroundImage:I要大寫,url: 69 $("#divContent").css("backgroundImage", "url(" + s[1] + ")").css("width", s[2] + "px").css("height", s[3] + "px");//注意單位一定要加上 70 } 71 } 72 //截圖 73 $(function () { 74 $("#divCut").resizable({ 75 containment: '#divContent' 76 }).draggable({ containment: 'parent' }); 77 $("#btnCut").click(function () { 78 //開始獲取divCut的範圍 79 //offset():表示元素相對瀏覽器的相對座標. 80 var y = $("#divCut").offset().top - $("#divContent").offset().top; //得到縱座標. 81 var x = $("#divCut").offset().left - $("#divContent").offset().left; 82 var width = $("#divCut").width(); //寬度 83 var height = $("#divCut").height(); //高度. 84 $.post("/CutPhoto.ashx", { "action": "cut", "x": parseInt(x), "y": parseInt(y), "width": parseInt(width), "height": parseInt(height), "imgSrc": s[1] }, function (data) { 85 $("#cutPhotoSrc").attr("src", data); 86 }); 87 }); 88 //打水印並預覽相關推薦
週末大放送網站圖片上傳，水印，預覽，截圖
週末閒著沒事，將網站中經常用到的對圖片的操作做了一個總結，方便以後回顧，這裡將一天的成果，貼出來，希望能幫到大家。 首先是swfupload方式的無重新整理上傳，關於怎麼配置，按照demo 的寫法，我相信只要你不是太笨，都能成功。 專案結構： 上傳
圖片上傳時實現本地預覽功能的原理解析
前言 最近在專案上加一個圖片裁剪上傳的功能，用的是cropper外掛，注意到選擇本地圖片後就會有預覽效果，這裡整理一下這種預覽效果的實現原理； 實現原理 通過input的 type = file屬性和window的內建FileReader物件，利用
【獨家分享】資源大集合！週末大放送！Ja粉超級福利！
本週Ja強為Ja粉們帶來了兩波架構師資源 【高階架構師四十八個階段高階課】 【Java高階網際網路架構師課程】 廣大Ja粉們反應火熱 掀起了下載狂潮 。 。 。 Ja強看到如此景象，深感欣慰 不枉小Ja幾經周折地獲取到資源 值得一提的
springmvc圖片上傳（兼容ie8以上，實時預覽）
處理 spa aps news time htm tip 技術分享 ans html代碼： <form id="uploadform" method="post" enctype="multipart/form-data"> <
【轉載】【JAVA秒會技術之圖片上傳】基於Nginx及FastDFS，完成圖片的上傳及展示
相互 沒有 con 性能 ext 存儲服務器 網絡 管理 代理配置 基於Nginx及FastDFS，完成商品圖片的上傳及展示 一、傳統圖片存儲及展示方式 存在問題： 1）大並發量上傳訪問圖片時，需要對web應用做負載均衡，但是會存在圖片共享問題 2）web應
vue富文本編輯，編輯自動預覽，單個圖片上傳不能預覽的問題解決：
pac themes indexof conf html_ sta spa load this //預覽<div class="htmlViewBox"> <p v-html="activity_html_defaultMsg" v-show="html
基於Spring Boot實現圖片上傳/加水印一把梭操作
文章共 537字，閱讀大約需要 2分鐘 ！ 概述 很多網站的圖片為了版權考慮都加有水印，尤其是那些圖片類網站。自己正好最近和圖片打交道比較多，因此就探索了一番基於 Spring Boot這把利器來實現從 圖片上傳 → 圖片加水印 的一把梭操作！ 注： 本文首發於 M
微信小程式圖片選擇、上傳到伺服器、預覽（PHP）實現例項
微信小程式圖片選擇、上傳到伺服器、預覽（PHP）實現例項 小程式實現選擇圖片、預覽圖片、上傳到開發者伺服器上 後臺使用的tp3.2 圖片上傳 請求時候的header參考時可以去掉(個人後臺驗證許可權使用) 小程式前端程式碼： <view class="se
Dedecmsv5.7整合ueditor 圖片上傳新增水印
最近的專案是做dedecmsv5.7的二次開發，被要求上傳的圖片要加水印，百度ueditor編輯器不支援自動加水印，所以，找了很多資料整合記錄一下，具體效果圖 這裡不仔細寫dedecmsv5.7 整合ueditor編輯器了 1、開啟ueditor目錄下的php目錄下的con
小程式之圖片的上傳、刪除和預覽和視訊的上傳和刪除
最近在做一個小程式，帖子中用到了一個關於文字、圖片和視訊的一些操作。 最終的樣式 原始樣式 上傳圖片 上傳視訊 這個可以實現輸入文字
基於asp.net + easyui框架，js實現上傳圖片之前判斷圖片格式，同時實現預覽，相容各種瀏覽器+下載
最近在做圖片上傳的一個前臺頁面，上傳圖片功能雖然很簡單，但是需要我們學習的地方很多。在上傳圖片之前驗證圖片的格式，並同時實現預覽。這篇部落格我們就用一段簡單的js程式碼來實現驗證圖片格式，並同時預覽的功能。 html頁面 <div> 選
開發一款圖片上傳+使用者反饋(留言)小程式，附前端+後端程式碼
之前幫別人開發的，只是花了一天的時間，做好了前端+後端，還有後臺哦！！！很簡單的一個小程式，就是表單+圖片上傳。下面是小程式的介面。程式碼結構手機版後臺程式碼我就不貼了，直接整個打包。留言板小程式部署教
Java Spring Boot 上傳文件和預覽文件地址解析
jar包 tof form loader index res for catch div @RequestMapping(value ="/upload",method = RequestMethod.POST) @Permission(isAjax=fa
confluence上傳文件附件預覽亂碼問題（linux服務器安裝字體操作）
serve 接下來 ati rwx inux 打開 預覽 字庫 這一 在confluence上傳excel文件，預覽時發現亂碼問題主要是因為再上傳文件的時候一般是Windows下的文件上傳，而預覽的時候，是linux下的環境，由於linux下沒有微軟字體，所以預覽的時候
關於confluence上傳文件附件預覽查看時出現亂碼的問題解決辦法
ascii env ssi x11 要求 c盤 無法識別 ntc 默認自帶 在confluence上傳excel文件，預覽時發現亂碼問題主要是因為再上傳文件的時候一般是Windows下的文件上傳，而預覽的時候，是linux下的環境，由於linux下沒有微軟字體，所以預覽的時
使用ajax發送文件的三種方式及預覽圖片的方法,上傳按鈕美化
absolut jquer 文件的 inpu headers return isp roc onchange 後端代碼 def upload(request): if request.method == "GET": return render(
php圖片上傳類（支持縮放、裁剪、圖片縮略功能）
php圖片上傳類（支持縮放、裁剪、圖片縮代碼： /** * @author [Lee] <[<[email protected]>]> * 1、自動驗證文件是表單提交的文件還是base64流提交的文件 * 2、驗證圖片類型是否合法 * 3、驗證圖片尺寸是否合法 * 4、驗證圖片大小是否合法
給MFC新增圖片,動圖,新增背景音樂(打包大放送)
最近突然有了一種想用MFC做賀卡的想法,做成一個.exe程式,讓被祝賀的人可以用電腦在任何位置開啟觀看,這就要求所使用資源必須新增至MFC工程,下面的方法都是本人測試過的,希望對你有所幫助呦! 1新增圖片 MFC只支援新增256色bmp格式的圖片,如果你沒有bmp格式的圖片,可以從該連結
CKfinder for java詳解二：縮圖及圖片上傳的縮放
我們找到 <thumbs><enabled>true</enabled><url>�SE_URL%_thumbs/</url><directory>�SE_DIR%_thumbs</directory>&l
史上最全的Python資料大放送，你敢來我就敢送！
基礎入門類 《Python簡明教程》：這是一本只有100頁左右的小冊子，你可以迅速的瀏覽並敲一遍程式碼，或多或少都會提升你的Python基礎能力； 《笨方法學Python》：這本書同樣非常的短小精悍，全書是以習題的形式讓讀者掌握有關Python的基礎知識，裡面的程式碼建議讀者能夠敲一遍；