出于安全性能的考慮，目前js端不支持獲取本地圖片進行預覽，正好在做一款類似于QQ心情的發布框，找了不少jquery插件，沒幾個能滿足需求，因此自己使用SWFuplad來實現這個圖片上傳預覽。
先粘上以下插件，在別的圖片上傳功能說不定各位能用的上。
1、jQuery File Upload
Demo地址：http://blueimp.github.io/jQuery-File-Upload/
優點是使用jquery進行圖片的異步上傳，可控性好，可根據自己的需求任意定制；
缺點是在IE9等一些瀏覽器中，不支持圖片預覽，圖片選擇框中不支持多文件選擇（這點是我拋棄它的原因）；
2、CFUpdate
Demo地址：http://www.access2008.cn/update/
優點：使用js+flash實現，兼容所有瀏覽器，優點界面效果還可以，支持批量上傳、支持預覽、進度條、刪除等功能，作為圖片的上傳控件非常好用；
缺點：定制型插件，只能修改顏色，樣式已經固定死了；
3、SWFUpload
下載地址：http://code.google.com/p/swfupload/
中文文檔幫助地址：http://www.phptogether.com/swfuploadoc/#uploadError
本文所使用的就是此插件，使用flash+jquery實現，可以更改按鈕及各種樣式；監聽事件也很全。
以下貼出源碼及設計思路，主要功能點包括：
1、圖片的上傳預覽（先將圖片上傳至服務器，然后再返回地址預覽，目前拋開html5比較靠譜的預覽方式）
2、縮略圖的產生（等比例縮放后再截取中間區域作為縮略圖，類似QQ空間的做法，不過貌似QQ空間加入了人臉識別的功能）
以下是此次實現的功能截圖：
1、Thumbnail.cs
復制代碼 代碼如下:
public class Thumbnial
{
/// summary>
/// 生成縮略圖
/// /summary>
/// param name="imgSource">原圖片/param>
/// param name="newWidth">縮略圖寬度/param>
/// param name="newHeight">縮略圖高度/param>
/// param name="isCut">是否裁剪（以中心點）/param>
/// returns>/returns>
public static Image GetThumbnail(System.Drawing.Image imgSource, int newWidth, int newHeight, bool isCut)
{
int rWidth = 0; // 等比例縮放后的寬度
int rHeight = 0; // 等比例縮放后的高度
int sWidth = imgSource.Width; // 原圖片寬度
int sHeight = imgSource.Height; // 原圖片高度
double wScale = (double)sWidth / newWidth; // 寬比例
double hScale = (double)sHeight / newHeight; // 高比例
double scale = wScale hScale ? wScale : hScale;
rWidth = (int)Math.Floor(sWidth / scale);
rHeight = (int)Math.Floor(sHeight / scale);
Bitmap thumbnail = new Bitmap(rWidth, rHeight);
try
{
// 如果是截取原圖，并且原圖比例小于所要截取的矩形框，那么保留原圖
if (!isCut scale = 1)
{
return imgSource;
}
using (Graphics tGraphic = Graphics.FromImage(thumbnail))
{
tGraphic.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic; /* new way */
Rectangle rect = new Rectangle(0, 0, rWidth, rHeight);
Rectangle rectSrc = new Rectangle(0, 0, sWidth, sHeight);
tGraphic.DrawImage(imgSource, rect, rectSrc, GraphicsUnit.Pixel);
}
if (!isCut)
{
return thumbnail;
}
else
{
int xMove = 0; // 向右偏移（裁剪）
int yMove = 0; // 向下偏移（裁剪）
xMove = (rWidth - newWidth) / 2;
yMove = (rHeight - newHeight) / 2;
Bitmap final_image = new Bitmap(newWidth, newHeight);
using (Graphics fGraphic = Graphics.FromImage(final_image))
{
fGraphic.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic; /* new way */
Rectangle rect1 = new Rectangle(0, 0, newWidth, newHeight);
Rectangle rectSrc1 = new Rectangle(xMove, yMove, newWidth, newHeight);
fGraphic.DrawImage(thumbnail, rect1, rectSrc1, GraphicsUnit.Pixel);
}
thumbnail.Dispose();
return final_image;
}
}
catch (Exception e)
{
return new Bitmap(newWidth, newHeight);
}
}
}
2、圖片上傳處理程序Upload.ashx
復制代碼 代碼如下:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Drawing;
namespace Mood
{
/// summary>
/// Upload 的摘要說明
/// /summary>
public class Upload : IHttpHandler
{
Image thumbnail;
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
try
{
string id = System.Guid.NewGuid().ToString();
HttpPostedFile jpeg_image_upload = context.Request.Files["Filedata"];
Image original_image = System.Drawing.Image.FromStream(jpeg_image_upload.InputStream);
original_image.Save(System.Web.HttpContext.Current.Server.MapPath("~/Files/" + id + ".jpg"));
int target_width = 200;
int target_height = 150;
string path = "Files/Files200/" + id + ".jpg";
string saveThumbnailPath = System.Web.HttpContext.Current.Server.MapPath("~/" + path);
thumbnail = Thumbnial.GetThumbnail(original_image, target_width, target_height, true);
thumbnail.Save(saveThumbnailPath);
context.Response.Write(path);
}
catch (Exception e)
{
// If any kind of error occurs return a 500 Internal Server error
context.Response.StatusCode = 500;
context.Response.Write("上傳過程中出現錯誤!");
}
finally
{
if (thumbnail != null)
{
thumbnail.Dispose();
}
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
3、前臺界面Mood.aspx
復制代碼 代碼如下:
%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Mood.aspx.cs" Inherits="Mood.Mood" %>
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
html xmlns="http://www.w3.org/1999/xhtml">
head runat="server">
script src="SwfUpload/swfupload.js" type="text/javascript">/script>
script src="jquery-1.7.1.js" type="text/javascript">/script>
link href="Style/Mood.css" rel="stylesheet" type="text/css" />
title>/title>
script type="text/javascript">
$().ready(function () {
SetSwf();
$("#btnReply").click(function () {
$("#divImgs").hide();
});
});
var swfu;
function SetSwf() {
swfu = new SWFUpload({
// Backend Settings
upload_url: "Upload.ashx",
// File Upload Settings
file_size_limit: "20 MB",
file_types: "*.jpg;*.png;*jpeg;*bmp",
file_types_description: "JPG;PNG;JPEG;BMP",
file_upload_limit: "0", // Zero means unlimited
file_queue_error_handler: fileQueueError,
file_dialog_complete_handler: fileDialogComplete,
upload_progress_handler: uploadProgress,
upload_error_handler: uploadError,
upload_success_handler: uploadSuccess,
upload_complete_handler: uploadComplete,
// Button settings
button_image_url: "/Style/Image/4-16.png",
button_placeholder_id: "divBtn",
button_width: 26,
button_height: 26,
// Flash Settings
flash_url: "/swfupload/swfupload.swf",
custom_settings: {
upload_target: "divFileProgressContainer"
},
// Debug Settings
debug: false
});
}
// 文件校驗
function fileQueueError(file, errorCode, message) {
try {
switch (errorCode) {
case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:
alert("上傳文件有錯誤！");
break;
case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:
alert("上傳文件超過限制（20M）！");
break;
case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:
case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE:
default:
alert("文件出現錯誤！");
break;
}
} catch (ex) {
this.debug(ex);
}
}
// 文件選擇完畢時觸發
function fileDialogComplete(numFilesSelected, numFilesQueued) {
try {
if (numFilesQueued > 0) {
$("#divImgs").show();
for (var i = 0; i numFilesQueued; i++) {
$("#ulUpload").append('li id="li' + i + '">img class="imgload" src="/style/image/loading.gif" alt="" />/li>');
}
this.startUpload();
}
} catch (ex) {
this.debug(ex);
}
}
// 滾動條的處理方法 暫時沒寫
function uploadProgress(file, bytesLoaded) {
}
// 每個文件上傳成功后的處理
function uploadSuccess(file, serverData) {
try {
var index = file.id.substr(file.id.lastIndexOf('_') + 1);
$("#li" + index).html("");
$("#li" + index).html('img src="' + serverData + '" alt=""/>');
index++;
} catch (ex) {
this.debug(ex);
}
}
// 上傳完成后，觸發下一個文件的上傳
function uploadComplete(file) {
try {
if (this.getStats().files_queued > 0) {
this.startUpload();
}
} catch (ex) {
this.debug(ex);
}
}
// 單個文件上傳錯誤時處理
function uploadError(file, errorCode, message) {
var imageName = "imgerror.png";
try {
var index = file.id.substr(file.id.lastIndexOf('_') + 1);
$("#li" + index).html("");
$("#li" + index).html('img src="/style/image/imgerror.png" alt=""/>');
index++;
} catch (ex3) {
this.debug(ex3);
}
}
/script>
/head>
body>
form id="form1" runat="server">
div style="width: 600px;">
div class="divTxt">
文本框
/div>
div style="height: 30px; line-height: 30px;">
div id="divBtn" style="float: left; width: 26px; height: 26px;">
/div>
div style="float: right;">
input id="btnReply" type="button" value="發表" />
/div>
/div>
div id="divImgs" style="border: 1px solid #cdcdcd; display: none;">
div>
上傳圖片/div>
ul id="ulUpload" class="ulUpload">
/ul>
/div>
/div>
/form>
/body>
/html>
使用Vs2010開發，以下為項目源碼地址
您可能感興趣的文章:- jQuery判斷多個input file 都不能為空的例子
- 上傳圖片預覽JS腳本 Input file圖片預覽的實現示例
- js 獲取、清空input type="file"的值示例代碼
- 將input file的選擇的文件清空的兩種解決方案
- 讀取input:file的路徑并顯示本地圖片的方法
- js 實現 input type="file" 文件上傳示例代碼
- 判斷多個input type=file是否有已經選擇好文件的代碼
- input file的默認value清空與賦值方法
- css美化input file按鈕的代碼方法
- ie8本地圖片上傳預覽示例代碼
- javascript 圖片上傳預覽-兼容標準
- input file上傳 圖片預覽功能實例代碼
