您也可以是其它的服务端语言,复制代码 代码如下

上传进度设置事件

        var commoNo = $(“#commoNo”).val();
        var brandNo = $(“#brand option:selected”).val();
        var catNo = $(“#thirdCommon option:selected”).val();
        //初始化上传图片
        if (brandNo != “” && commoNo != “” && catNo != “”) {
            this.addPostParam(“commoNo”, commoNo);
            this.addPostParam(“thirdCatNo”, catNo);
            this.addPostParam(“brandNo”, brandNo);
            if (numFilesSelected > 0) {
               
document.getElementById(this.customSettings.cancelButtonId).disabled =
false;
            }
        } else {
            for (var i = 0; i < numFilesSelected; i++) {
                var promitId = this.customSettings.progressTarget;
                $(“#” + promitId).find(“*”).remove();
                var fileId = this.getFile().id;
                this.cancelUpload(fileId, false);
            }
            $(“#ck_fs_upload_progress”).html(“”);
            alert(“请选择分类和品牌!”);
        }
    } catch (ex) {
        this.debug(ex);
    }
}

您可能感兴趣的文章:

  • 使用SWFUpload实现无刷新上传图片
  • PHP
    swfupload图片上传的实例代码
  • SwfUpload在IE10上不出现上传按钮的解决方法
  • swfupload
    ajax无刷新上传图片实例代码
  • phpcms模块开发之swfupload的使用介绍
  • SWFUpload与CI不能正确上传识别文件MIME类型解决方法分享
  • 为SWFUpload增加ASP版本的上传处理程序
  • swfupload使用代码说明
  • 文件上传之SWFUpload插件(代码)
  • 文件上传插件SWFUpload的使用指南

作者:Petter Liu

<form id=”myForm” action=”upload.php” method=”post”
enctype=”multipart/form-data”>
<input type=”file” size=”60″ name=”myfile”>
<input type=”submit” value=”Ajax File Upload”>
</form>
<div id=”progress”>
<div id=”bar”></div>
<div id=”percent”>0%</div >
</div>
<div id=”message”></div>

另一种写法

ckeditor添加自定义按钮整合swfupload实现批量上传图片
给ckeditor添加自定义按钮,由于ckeditor只能上传一张图片,如果要上传多张图片就要结合ckfinder,而ckfinder是收费的,所以就想通过自定义按钮整合swfupload实现一次上传多张图片的功能
首先下载并安装ckeditor。
下载swfupload解压拷贝到对应的文件目录下
3、自定义工具栏按钮:
我们可以自定义ckeditor工具栏要显示的按钮,工具栏按钮定义可以参考这里。
现在我们需要向工具栏添加一个自定义功能的按钮。ckeditor工具栏中的每个按钮都是作为插件定义在ckeditor\plugins\
目录中。我们在ckeditor\plugins\中创建一个新文件夹imagedef。在imagedef文件夹内,我们创建一个plugin.js文件,它的代码如下:
CKEDITOR.plugins.add(
    “imagedef”, {
        requires: [“dialog”], //当按钮触发时弹出对话框
        init: function (a) {
            a.addCommand(“imagedef”, new
CKEDITOR.dialogCommand(“imagedef”));
            a.ui.addButton(
                “Imagedef”, {
                    label: “图片”,
                    command: “imagedef”,
                    icon: this.path + “imagedef.gif”
                });
            CKEDITOR.dialog.add(“imagedef”, this.path +
“dialogs/imagedef.js”);
        }
    }
);
在上面的代码中我们指定自定义按钮的图标imagedef.gif,imagedef.gif放在imagedef文件夹中。
在imagedef文件夹下新建一个dialogs目录,在dialogs目录下新建一个imagedef.js文件,就是上面代码调用的imagedef.js文件
CKEDITOR.dialog.add(
    “imagedef”,
    function (b)
    {
        return {
            title: “图片”,
            minWidth: 590,
            minHeight: 300,
            contents: [{
                id: “tab1”,
                label: “”,
                title: “”,
                expand: true,
                padding: 0,
                elements: [{
                    type: “html”,
                    html: initImageDlgInnerHtml()
//对话框中要显示的内容,这里的代码将发在下面
                }]
            }],
            onOk: function () { //对话框点击确定的时候调用该函数
                    var D = this;
                    var imes = getCkUploadImages();
//获取上传的图片,用于取路径,将图片显示在富文本编辑框中
                    $(imes).each(function () {
                        D.imageElement =
b.document.createElement(‘img’);
                        D.imageElement.setAttribute(‘alt’, ”);
                        D.imageElement.setAttribute(‘_cke_saved_src’,
$(this).attr(“src”));
                        D.imageElement.setAttribute(‘src’,
$(this).attr(“src”));
                        D.commitContent(1, D.imageElement);
                        if (!D.imageElement.getAttribute(‘style’)) {
                            D.imageElement.removeAttribute(‘style’);
                        }
                        b.insertElement(D.imageElement);
                    });
                },
                onLoad: function () { //对话框初始化时调用
                    initEventImageUpload();
//用于注册上传swfupload组件
                },
                onShow: function () {
                    clearCkImageUpload();
//在对话框显示时作一些特殊处理
                }
        };
    }
);
 
接下来我们需要注册imagedef插件。原文中的给出方法是在ckeditor.js中注册,这会使以后升级新版本遇到困难。提倡使用下面的方法在config.js中注册自定义插件:
CKEDITOR.editorConfig = function (config) {
    config.toolbar_Full = [
        [‘Source’, ‘Preview’, ‘-‘, ‘Templates’],

var swfu;
window.onload = function() {
var settings = {
flash_url : “js/swfupload_f9.swf”, //flash地址
upload_url: “upload.php”, //上传文件处理地址
post_params: {“PHPSESSID” : ““},
file_size_limit : “1000″, //大小限制 默认单位为kb
file_types : “*.jpg;*.gif;*.png;*.swf”,//文件类型
file_types_description : “Web Image Files”,//文件类型描述
file_upload_limit : 100,//上传文件限制
file_queue_limit : 0,
custom_settings : {
progressTarget : “fsUploadProgress”,
cancelButtonId : “btnCancel”
},
debug: false,

@using (Html.BeginForm(“Upload”, “Home”, FormMethod.Post, new { enctype
= “multipart/form-data” , id=”form1″}))
{
<div class=”row”>
<label for=”file”>
Upload Image:</label>
<input type=”file” name=”fileToUpload” id=”fileToUpload”
multiple=”multiple” onchange=”fileSelected();” />
</div>
<div id=”fileName”>
</div>
<div id=”fileSize”>
</div>
<div id=”fileType”>
</div>
<div class=”row”>
<input type=”button” onclick=”uploadFile()” value=”Upload Image”
/>
</div>
<div id=”progressNumber”>
</div>
}

XML/HTML Code

        //显示上传信息

        [‘Cut’, ‘Copy’, ‘Paste’, ‘PasteText’, ‘PasteFromWord’, ‘-‘,
‘Print’, ‘SpellChecker’, ‘Scayt’],
        [‘Undo’, ‘Redo’, ‘-‘, ‘Find’, ‘Replace’, ‘-‘, ‘SelectAll’,
‘RemoveFormat’],
        [‘Form’, ‘Checkbox’, ‘Radio’, ‘TextField’, ‘Textarea’,
‘Select’, ‘Button’, ‘ImageButton’, ‘HiddenField’],
        ‘/’,
        [‘Bold’, ‘Italic’, ‘Underline’, ‘Strike’, ‘-‘, ‘Subscript’,
‘Superscript’],
        [‘NumberedList’, ‘BulletedList’, ‘-‘, ‘Outdent’, ‘Indent’,
‘Blockquote’],
        [‘JustifyLeft’, ‘JustifyCenter’, ‘JustifyRight’,
‘JustifyBlock’],
        [‘Link’, ‘Unlink’, ‘Anchor’],
        [‘Imagedef’, ‘Table’, ‘HorizontalRule’, ‘Smiley’,
‘SpecialChar’, ‘PageBreak’],
        ‘/’,
        [‘Styles’, ‘Format’, ‘Font’, ‘FontSize’],
        [‘TextColor’, ‘BGColor’]
    ];
    config.resize_maxWidth = 775;
    config.removePlugins = ‘elementspath’; //去掉文本框下面出现body p

    config.extraPlugins = “imagedef”; //注册自定义按钮
};
 

file_queued_handler : fileQueued,
file_queue_error_handler : fileQueueError,
file_dialog_complete_handler : fileDialogComplete,
upload_start_handler : uploadStart,
upload_progress_handler : uploadProgress,
upload_error_handler : uploadError,
upload_success_handler : uploadSuccess,
upload_complete_handler : uploadComplete,
queue_complete_handler : queueComplete
};

public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
/// <summary>
/// Uploads the specified files.
/// </summary>
/// <param name=”fileToUpload”>The files.</param>
/// <returns>ActionResult</returns>
[HttpPost]
public ActionResult Upload(HttpPostedFileBase[] fileToUpload)
{
foreach (HttpPostedFileBase file in fileToUpload)
{
string path = System.IO.Path.Combine(Server.MapPath(“~/App_Data”),
System.IO.Path.GetFileName(file.FileName));
file.SaveAs(path);
}
ViewBag.Message = “File(s) uploaded successfully”;
return RedirectToAction(“Index”);
}
}

您可能感兴趣的文章:

  • AJAX和JSP实现的基于WEB的文件上传的进度控制代码
  • AJAX 进度条实现代码
  • ajax+php打造进度条
    readyState各状态
  • ajax+php打造进度条代码[readyState各状态说明]
  • 让ajax更加友好的实现方法(实时显示后台处理进度。)
  • ajax提交加载进度条示例代码
  • php+ajax实现带进度条的大数据排队导出思路以及源码
  • jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码
  • jsp+ajax发送GET请求的方法
  • jquery+ajax实现跨域请求的方法
  • asp.net+ajax的Post请求实例
  • 服务端配置实现AJAX跨域请求
  • 解决ajax跨域请求数据cookie丢失问题
  • django通过ajax发起请求返回JSON格式数据的方法
  • Ajax在请求过程中显示进度的简单实现

 代码如下

        $(“#ck_pic_div”).append(img);
        $(“#ck_pic_div”).dragsort(“destroy”);
//图片排序,这里要下载dragsort插件
        $(“#ck_pic_div”).dragsort({
            dragSelector: “div”,
            dragBetween: true,
            placeHolderTemplate: “<div class=’placeHolder’
style=’float:left’><img /><a></a></div>”
        });
    } catch (ex) {}
}

swfu = new SWFUpload(settings);
};

点评:下面我们使用Html 5的新特性file
api实现上传文件,并显示上传文件进度百分比。意图是这样的,当选择文件时,显示当前文件信息

<?php
$output_dir = “../upload/”;
if(isset($_FILES[“myfile”]))
{
//Filter the file types , if you want.
if ($_FILES[“myfile”][“error”] > 0)
{
echo “Error: ” . $_FILES[“file”][“error”] . “<br>”;
}
else
{
//move the uploaded file to uploads folder;
move_uploaded_file($_FILES[“myfile”][“tmp_name”],$output_dir.
$_FILES[“myfile”][“name”]);
echo “Uploaded File :”.$_FILES[“myfile”][“name”];
}
}
?>

              //跳转到上传成功网页

//回调重写,主要是设置参数,如果需要的参数没有,就清空上传的文件,为了解决下次选择会上传没有参数时的图片
function fileDialogCompleteCk(numFilesSelected, numFilesQueued) {
    try {

上面是就原生的Javascript,在onchange事件执行fileSelected的function,在点击button执行了uploadFile的function,这里使用XMLHttpRequest实现ajax上传文件。
注意代码在Firefox 14 可以工作,IE 9目前不支持file api,可以参加这里。
服务端的代码很简单:

复制代码 代码如下:

         }

function getCkUploadImages() {
    return $(“#ck_pic_div”).find(“img”);
}
var ckSwfu; //初始化上传控件
function ckeditorInitSwfu(progress, btn, spanButtonPlaceHolder) {
    var uploadUrl =
“${BasePath}/commodity_com/img/uploadCommodityImg.ihtml?type=1”;
   
//在firefox、chrome下,上传不能保留登录信息,所以必须加上jsessionid。
    var jsessionid = $.cookie(“JSESSIONID”);
    if (jsessionid) {
        uploadUrl += “?jsessionid=” + jsessionid;
    }
    ckSwfu = new SWFUpload({
        upload_url: uploadUrl,
        flash_url:
“${BasePath}/res/base/plugin/swfupload/swfupload.swf”,
        file_size_limit: “4 MB”,
        file_types: “*.jpg;*.png;*.gif;*.jpeg;*.bmp”,
        file_types_description: “Web Image Files”,
        file_queue_limit: 0,
        custom_settings: {
            progressTarget: progress,
            cancelButtonId: btn
        },
        debug: false,
        button_image_url:
“${BasePath}/res/base/plugin/swfupload/button_notext.png”,
        button_placeholder_id: spanButtonPlaceHolder,
        button_text: “<span
class=’btnText’>上传图片</span>”,
        button_width: 81,
        button_height: 24,
        button_text_top_padding: 2,
        button_text_left_padding: 20,
        button_text_style: ‘.btnText{color:#666666;}’,
        button_cursor: SWFUpload.CURSOR.HAND,
        file_queued_handler: fileQueuedCk,
        file_queue_error_handler: fileQueueError,
        file_dialog_complete_handler: fileDialogCompleteCk,
        upload_start_handler: uploadStart,
        upload_progress_handler: uploadProgress,
        upload_error_handler: uploadError,
        upload_success_handler: uploadSuccessCk,
        upload_complete_handler: uploadComplete,
        queue_complete_handler: queueComplete
    });
};

这里我们是结合Asp.net
MVC做为服务端,您也可以是其它的服务端语言。让我们看面这个片断的HTML:

本例用了jquery.form.js请到演示页面查看
图片 1 
CSS Code

              progress.toggleCancel(false, this);            

function clearCkImageUpload() { //对对话框弹出时作特殊处理
    if ($(“#ck_fs_upload_progress”).html().indexOf(“.jpg”) != -1)
{
        $(“#ck_fs_upload_progress”).html(“”);
    }
    $(“#ck_pic_div”).html(“”);
}

相关的Javascript是这样的:

upload.php

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章