注册登录

【QQ心情图片】模拟QQ心情图片上传预览示例-上传预览

时间:2016-02-15 21:44 来源: 我爱IT技术网作者:佚名

欢迎您访问我爱IT技术网，今天小编为你分享的编程技术是：【模拟QQ心情图片上传预览示例】，下面是详细的讲解！

模拟QQ心情图片上传预览示例

<%@ 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="http://www.jb51.net/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="http://www.jb51.net/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>

关于模拟QQ心情图片上传预览示例的用户互动如下：

　　相关问题：请问qq收藏的说说其图片无法下载吗

　　答：QQ空间为您提供了三种上传照片的工具：极速上传：速度快，可上传超过2M的大图，一次上传100张照片(黄钻用户300张)，还可选择上传原图(最大可查看宽度为1000像素的大图)，提供加空间地址作水英排序、预览原图等功能。批量上传：轻量的批量上传，... >>详细

　　相关问题：为什么在qq上传照片就自动发说说

　　答：在qq空间上面上传照片时，qq默认的是发表日志或是上传照片会自动的发说说。如果不想让它发表的话，可以设置中进行更改。在qq空间中，当上传照片或是发表说说它默认的是会自动的显示在空间上的。如果不想让它显示出来可以直接在qq的面板中，点击... >>详细

　　相关问题：手机qq空间得说说，为什么第九张图以后都看不见

　　答：功能限制、QQ空间说说多图上传最多支持9张图片；选完图后，只要不超过9张限制，可以继续添加图片。若上传数量超过9张时系统将会提示； QQ空间说说如何插入图片、多图？功能说明： 1、QQ空间说说多图支持上传9张图片，且还可以对每张图片做特效... >>详细

评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）

【QQ心情图片】模拟QQ心情图片上传预览示例-上传预览

模拟QQ心情图片上传预览示例

关于模拟QQ心情图片上传预览示例的用户互动如下：

第一章 ASP.NET 教程（基础）

第二章 ASP.NET 教程（高级）

【QQ心情图片】模拟QQ心情图片上传预览示例-上传预览

模拟QQ心情图片上传预览示例

关于模拟QQ心情图片上传预览示例的用户互动如下：

第一章 ASP.NET 教程 （基础）

第二章 ASP.NET 教程（高级）

第一章 ASP.NET 教程（基础）