zoukankan      html  css  js  c++  java
  • uploadify多文件上传插件

    这个插件是兼容IE8及以上版本的,实现了基本功能,底部有下载连接

    代码如下:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>uploadify多文件上传插件使用</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="js/jquery-1.8.2.js"></script>
    <link rel="stylesheet" type="text/css" href="js/uploadfiy/uploadify.css"/>
    <style type="text/css">
    #fileQueue {
    background_color: #FFF;
    border_radius: 3px;
    /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); */
    border:1px solid #95B8E7;
    /* box-shadow: 0 1px 3px rgba(135, 175, 255, 1); */
    height: 220px;
    margin-bottom: 10px;
    overflow: auto;
    /* padding: 5px 10px; */
    395px;
    }
    </style>
    <!--这个js是经过修改的,可以兼容IE8及以上的版本-->
    <script type="text/javascript" src="js/uploadfiy/jquery.uploadify.js"></script>

    <script type="text/javascript">

    $(document).ready(function() {
    initFile();
    });

    function initFile() {

    $("#uploadify").uploadify({
    'uploader': 'FileUpLoadServlet',//后台处理的页面
    'swf' : './js/uploadfiy/uploadify.swf',
    'script' : '',
    'width':80,
    'height':23,
    'folder' : '../upload',
    'buttonText' : '选择文件',
    'fileExt' : '*.*', //允许上传的文件格式
    'queueID' : 'fileQueue',
    'auto' : false, //需要手动的提交申请
    'simUploadLimit':3, //同时运行上传的进程数
    'queueSizeLimit':10,//
    'multi' : true
    //'scriptData':{'dept':'dept1','group':'group1'}, //这个参数必须要设置成method为get,
    //'method':'get' //后台用request.getParameter('name')获取名字的值
    });
    }

    //用户取消函数
    function funCancel(event, ID, fileObj, data) {
    alert('您取消了' + fileObj.name + '操作', 'info');
    return;
    }

    //图片上传发生的事件
    function funComplete(event, ID, fileObj, response, data) {
    //$("#pic").html('<img id="pic" runat="server" src=../upload/' + response + '.jpg style="300;height:200px;"/>');
    if (response == 0) {
    jBox.tip('图片' + fileObj.name + '操作失败', 'info');
    return;
    }
    $("#pic").attr("src", "../upload/" + response).height(200).width(300);
    jBox.tip('图片' + fileObj.name + '操作成功', 'info');
    return;
    }

    //上传发生错误时。
    function funError(event, ID, fileObj, errorObj) {
    jBox.tip(errorObj.info);
    return;
    }
    </script>
    </head>

    <body style="background-color:white;">
    <div id="maindiv" style="margin:0 auto;100%; text-align:center;border:1px solid #95b8e7; background-color:#F3F3F3;">
    <div id="filecollection" style=" 420px;margin:0 auto;text-align:left; margin-top:30px;margin-bottom:50px;">
    <input type="file" name="uploadify" id="uploadify" />
    <div id="fileQueue"></div>
    <p style="font-size:12px;">
    <a href="javascript:$('#uploadify').uploadify('upload','*')">上传</a>| <a
    href="javascript:$('#uploadify').uploadify('cancel','*')">取消上传</a>
    </p>
    </div>
    </div>
    </body>
    </html>
    代码下载连接:http://download.csdn.net/detail/zhzhjieke/8411193
    希望能多多交流,欢迎指正……
  • 相关阅读:
    IDEA
    elasticsearch java api
    Java-HttpUtil
    spring集成mybatis-plus
    linux语句速查
    linux切换jdk
    《Java并发编程实战》读书笔记
    设计模式六大原则
    Linux 启动管理
    Linux 日志管理
  • 原文地址:https://www.cnblogs.com/zhzhjieke/p/4263099.html
Copyright © 2011-2022 走看看