`

swfupload多图上传限制图片张数

    博客分类:
  • js
 
阅读更多

 

 

$.swfUpload({
            id: 'spanButtonPlaceholder',
            post_params: {
                'type': 'msg_flow',
                'subType': 'h'
            },
            isShowLoadImg: false,
            file_upload_limit: "6",

            upload_success_handler: uploadSuccess,
            file_queue_error_handler: uploadError,
            swfupload_loaded_handler : loaded,

            custom_settings: {
                upload_target: "divFileProgressContainer"
            }
        });

        function loaded() {
            var $imageDiv = $("#pic_list");
            var $imgList = $imageDiv.find("img");
            var stats = SWFUpload.instances.SWFUpload_1.getStats();
            stats.successful_uploads=$imgList.length;
            SWFUpload.instances.SWFUpload_1.setStats(stats);
        }

        function uploadError(file, code, message) {
            if (code == "-110") {
                alertmsg("文件大小超过" + "10M");
            } else if (code == "-130") {
                alertmsg(file.name + "文件类型不支持上传,将不会被上传");
            } else if (code == "-100") {
                alertmsg("图片上传数量超过" + 6 + "张,多余的不会上传");
            } else {
                console.log(code);
            }
        }
        function uploadSuccess(file, serverData) {
            addImage(serverData);

            var img = "";
            var $imageDiv = $("#pic_list");
            var $imgList = $imageDiv.find("img");
            for (var t = 0; t < $imgList.length; t++) {
                var $img = $($imgList[t]);
                img += $img.attr("src");
                if (t != $imgList.length - 1) {
                    img += ",";
                }
            }

            $('#imgList').val(img);

            var stats = SWFUpload.instances.SWFUpload_1.getStats();
            stats.successful_uploads=$imgList.length;
            SWFUpload.instances.SWFUpload_1.setStats(stats);
        }

        function addImage(serverData) {
            var jsonData = $.parseJSON(serverData);

            var src = jsonData.url;
            if (jsonData.error == -1) {
                $("#qwErrAlert").qwPopup({content: "图片格式错误!"});
                return;
            }

            var newElement = "<li style='float: left'><span class='del_img'><img onclick='bigPic(this);' class='upload_imgs'  src='" + src + "'><a class='button'></a></span></li>";
            $("#pic_list").append(newElement);
            $("a.button").bind("click", del);
        }

        var del = function () {
            $(this).parent().parent().remove();
            var src = $(this).siblings('img').attr('src');
            var img = "";
            var $imageDiv = $("#pic_list");
            var $imgList = $imageDiv.find("img");
            for (var t = 0; t < $imgList.length; t++) {
                var $img = $($imgList[t]);
                img += $img.attr("src");
                if (t != $imgList.length - 1) {
                    img += ",";
                }
            }
            $('#imgList').val(img);

            var stats = SWFUpload.instances.SWFUpload_1.getStats();
            stats.successful_uploads=$imgList.length;
            SWFUpload.instances.SWFUpload_1.setStats(stats);
        };

 html

 <tr id="mainImg">
    <th><em>*</em>正面图片:</th>
    <td>
	<div style="width: 500px; height: auto; border: 1px solid #e1e1e1; font-size: 12px; padding: 10px;">
	    <span id="spanButtonPlaceholder"></span>
	    <em id="emName9" style="display: none;">必须选择6张图片</em>
	    <div id="divFileProgressContainer"></div>
	    <div id="thumbnails">
		<ul id="pic_list" style="margin: 5px;"></ul>
		<div style="clear: both;"></div>
	    </div>
	</div>
	<input type="hidden" name="imgList" id="imgList" value=""/>
    </td>
</tr>

 

分享到:
评论

相关推荐

    swfUpload上传文件图片(多图片)

    SwfUpload是一款经典的JavaScript与Flash结合的文件上传组件,它允许用户实现多文件上传功能,尤其适用于图片上传。在Web应用中,SwfUpload能够提供一个友好的用户体验,通过Flash技术实现了异步上传,减轻了服务器...

    swfupload多图片上传PHP多图上传组件FLASH+JS

    **SWFUpload 多图片上传组件** SWFUpload 是一个流行的JavaScript和Flash相结合的文件上传组件,它允许用户实现多文件同时上传的功能。这个组件在Web开发中特别有用,因为它可以提供比传统HTML文件输入控件更丰富的...

    swfupload+servlet上传图片 支持多张图片上传

    SwfUpload 是一款开源的Flash上传组件,常用于网页中的...总的来说,SwfUpload 和 Servlet 结合,可以构建出一个高效、用户体验良好的多图上传功能。在实际开发中,需要注意安全性和性能优化,以提供稳定可靠的服务。

    swfupload仿58赶集图片上传的小例子

    `SWFUpload` 是一个广泛使用的Flash组件,它允许在网页中实现异步多文件上传,提供了类似于58赶集的图片上传体验。本篇文章将详细介绍如何使用SWFUpload来创建一个类似功能的图片上传程序。 首先,我们需要理解`...

    swfupload多图片上传

    **SWFUpload 多图片上传技术详解** 在Web开发中,用户经常需要上传多个文件,尤其是图片。SWFUpload是一款强大的JavaScript库,它利用Flash插件实现非浏览器原生方式的多文件上传功能,尤其适合处理大文件和批量...

    SWFUpload批量上传图片

    SWFUpload是一款强大的JavaScript与Flash相结合的文件上传组件,它被广泛用于网页中的批量图片上传功能。这个"SWFUpload批量上传图片"的项目是一个基于MyEclipse的工程实例,旨在帮助开发者理解和实现批量上传图片的...

    ThinkPHP+swfupload多图上传

    在这个场景下,"ThinkPHP+swfupload多图上传" 提供了一种解决方案。本文将深入探讨这两个技术如何结合,以及它们在实现多图上传时的关键知识点。 首先,让我们了解下ThinkPHP。ThinkPHP是一个基于PHP的开源框架,它...

    swfupload多图片可预览删除上传插件

    "swfupload多图片可预览删除上传插件"是一个基于SWFUpload技术的PHP实现的上传组件,专为处理多图片上传并提供预览和删除功能而设计。这款插件广泛兼容主流浏览器,包括IE8+、Firefox以及Chrome,为用户提供了便捷的...

    jquery swfupload图片上传插件制作图片批量上传和单...

    在IT行业中,jQuery Swfupload是一款非常流行的图片上传插件,尤其适用于实现批量上传和单个文件上传功能。这个插件结合了jQuery的简洁API和SWFUpload的技术优势,为网页应用提供了强大的文件上传解决方案。下面我们...

    swfupload批量上传图片

    SWFUpload是一款强大的JavaScript与Flash结合的文件上传组件,它允许用户在网页上实现批量上传图片的功能。在本文中,我们将深入探讨SWFUpload的工作原理、实现步骤以及如何在上传成功后显示缩略图,并对图片进行...

    一个Ext2+SWFUpload做的图片上传对话框的例程

    本例程“一个Ext2+SWFUpload做的图片上传对话框”提供了一个高效且用户友好的解决方案,用于在Web应用中实现图片上传。下面我们将详细探讨这个例程涉及的技术和知识点。 首先,`Ext2`是Ext JS的一个早期版本,这是...

    swfupload批量图片上传

    它通过Flash技术提供了一种在不刷新页面的情况下上传多张图片的解决方案,这在用户体验上有着显著的优势,因为它允许用户在后台上传文件,而不会打断他们正在浏览的页面。 SwfUpload的工作原理是利用了Flash的异步...

    swfupload+asp+access批量上传图片

    首先,"swfupload" 是一个开源的Flash上传组件,它允许用户在网页上实现文件的批量上传功能,尤其适用于处理大文件或多个文件的上传需求。其次,"asp" 是Active Server Pages的缩写,是一种微软开发的服务器端脚本...

    SwfUpload多文件上传

    综上所述,SwfUpload多文件上传与Struts1的结合使用,为Web应用提供了强大且用户友好的文件上传功能。通过理解并掌握上述知识点,开发者可以构建出高效、稳定且安全的文件上传系统。在实际项目中,还需要根据具体...

    SWFUpload组件实现多图片上传(c#)

    SWFUpload是一款经典的JavaScript与Flash结合的文件上传组件,它在Web应用中广泛用于实现多文件上传功能,尤其适用于图片上传。本篇文章将详细介绍如何利用SWFUpload组件在C#后端环境中实现多图片上传的功能。 一、...

    swfupload 和 plupload 图片上传 实时预览

    3. **图片缩略图**:可以生成上传图片的缩略图,用于实时预览。 4. **文件大小限制**:允许开发者设置文件大小限制,防止大文件上传。 5. **队列管理**:用户可以控制上传队列,添加、删除或重新排序待上传的文件。 ...

    java图片上传--SWFUpload

    SWFUpload是一个流行的文件上传插件,它利用Flash技术提供了优秀的用户体验,包括多文件选择、进度条显示等功能。本文将详细介绍如何在Java项目中集成SWFUpload插件进行图片上传操作。 首先,SWFUpload是一个...

    Asp.Net SWFUpload多文件上传;KindEditor富文本框用户控件

    4. 如果需要上传图片,可以结合SWFUpload实现图片的选取和上传,然后返回图片的URL,插入到编辑器中。 在实际项目中,结合SWFUpload和KindEditor,我们可以创建一个功能完善的用户内容发布系统,用户不仅可以方便...

    JQ + swfupload 多文件上传

    "JQ + swfupload 多文件上传"是一种使用JavaScript库jQuery(简称JQ)和Flash插件SwfUpload实现的多文件上传解决方案。下面将详细解释这一技术的实现原理、优势以及如何运用。 SwfUpload是一款开源的Flash上传组件...

Global site tag (gtag.js) - Google Analytics