uploadfiy插件的使用(01_多图)

商品相册上传组件实现

最新推荐文章于 2025-05-23 14:41:09 发布

原创最新推荐文章于 2025-05-23 14:41:09 发布 · 252 阅读

0 ·

CC 4.0 BY-SA版权

JS常用专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种基于Uploadify的多文件上传组件实现方法，该组件允许用户批量上传图片到商品相册，并展示了如何使用JavaScript处理上传逻辑及响应结果。

商品相册:
<div>
    <span style="color: red;"><%--双击删除图片--%></span>
    <div id="fileQueue"></div>
    <input type="file" name="duotu" id="uploadify" />
</div>
<link href="__UPLOADIFY__/common.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="__UPLOADIFY__/jquery.uploadify.min.js"></script>
<script type="text/javascript">

$('#duotu').uploadify({
    swf: '__UPLOADIFY__/uploadify.swf',
    uploader: "{:U('Upload/upload')}",//文件上传php处理在附件中
    buttonText:'立即上传',
    fileTypeDesc:'选择文件吧',
    queueID: 'fileQueue',
    multi: true,
    onUploadSuccess:function(file,data){
        //将响应数据转换为json对象
        data = $.parseJSON(data);
        var path='';
        if(data.status == 0){
            layer.msg(data.msg,{icon: 5});
        }else{
            layer.msg(data.msg,{icon: 6});
            var str_html="<img src="+ data.url + " style='width:100px; height:80px;'>"+"<input type='hidden' class='gallery_img' name='gallery_img[]' value="+data.url+" />";
            $('#fileQueue').append(str_html);
        }
    },
});