jQuery.Uploadifyプラグインは、プログレスバー付きの大量アップロード機能を実現します.
6040 ワード
本論文の実例は、jQuery.Uploadifyプラグインが、プログレスバーを有する大量アップロード機能を実現することを述べている.皆さんに参考にしてあげます.具体的には以下の通りです.
アップロードをキャンセル
ここで述べたように、皆さんのjQueryプログラムの設計に役に立ちます.
Jquery Uploadify ,
$(document).ready(function () {
$("#pics").hide();
$("#uploadify").uploadify({
'uploader': 'js/jquery.uploadify-v2.1.4/uploadify.swf', //uploadify.swf
'script': 'UploadHandler.ashx?type=add', //
'cancelImg': 'js/jquery.uploadify-v2.1.4/cancel.png',
'buttonText': 'Select Image',
'folder': 'UploadFile/<% = DateTime.Now.ToString("yyyyMMdd") %>/', // 20130416
'queueID': 'fileQueue', // , id
'auto': false, // ,
'multi': true, // true
'fileExt': '*.jpg;*.gif;*.png', //
'queueSizeLimit': 5,
'fileDesc': 'Web Image Files (.JPG, .GIF, .PNG)', //
'sizeLimit': 1024000, // , 1024*1000 1M
'onComplete': function (event, queueID, fileObj, response, data) {
var html = "";
html += " <li class=\'myli\'>";
html += " <img src=\"" + response + "\" class=\'myimg\'/>";
html += " <div style=\" position:absolute; right:8px; bottom:5px\">";
html += " <img title=\" \" src=\"Images/delete.gif\" onclick=\"delImage(\'" + response + "\');\" />";
html += " </div>";
html += " </li>";
$("#pics").append(html);
},
'onAllComplete': function (event, data) { //
//alert(data.filesUploaded + ' !');
$("#pics").fadeIn();
}
});
});
function uploadpara() {
//
$('#uploadify').uploadifySettings('scriptData', { 'name': $('#txtName').val(), 'albums': $('#txtAlbums').val() });
$('#uploadify').uploadifyUpload();
}
function delImage(picurl) {
jsonAjax("UploadHandler.ashx", "type=del&picurl=" + picurl, "text", callBackTxt);
}
function jsonAjax(url, param, datat, callback) {
$.ajax({
type: "post",
url: url,
data: param,
dataType: datat,
success: callback,
error: function () {
jQuery.fn.mBox({
message: ' '
});
}
});
}
function callBackTxt(data) {
var o = data;
if (o != "") {
var e = $(".myli img[src='" + data + "']");
e.each(function () {
$(this).parent().remove();
})
} else {
alert(" ");
}
};
アップロード|アップロードをキャンセル
using System;
using System.Web;
using System.IO;
///
/// UploadHandler
///
public class UploadHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
context.Response.Charset = "utf-8";
string type = context.Request["type"];
if (type=="add")
{
HttpPostedFile file = context.Request.Files["Filedata"];
string uploadPath = HttpContext.Current.Server.MapPath(@context.Request["folder"]);
string name = context.Request.Params["name"]; //
string albums = context.Request.Params["albums"];
if (file != null)
{
if (!Directory.Exists(uploadPath))
{
Directory.CreateDirectory(uploadPath);
}
file.SaveAs(Path.Combine(uploadPath, file.FileName));
context.Response.Write(@context.Request["folder"] + file.FileName);
}
else
{
context.Response.Write("");
}
}
else if (type == "del")
{
string picurl = context.Request["picurl"];
try
{
File.Delete(context.Server.MapPath(picurl));
context.Response.Write(picurl);
}
catch
{
context.Response.Write("");
}
}
else
{ }
}
public bool IsReusable
{
get
{
return false;
}
}
}
jQueryに関する内容について興味がある方は、本駅のテーマを確認してください.「jquery中Ajax用法まとめ」、「jQuery表操作技巧まとめ」、「jQuery動画と特効用法まとめ」、「jQuery拡張技術まとめ」、「jQueryよくある経典特効まとめ」、「jQuery動画と特効用法まとめ」『jQuery常用プラグインと使い方のまとめ』ここで述べたように、皆さんのjQueryプログラムの設計に役に立ちます.