jquery.uploadify插件实现图片上传和预览效果
需要引进的JS和css:
我要自学网素材免费下载<link href="<%=ContextPath() %>/jquery/uploadify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<%=basePath%>jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="<%=basePath%>jquery/swfobject.js"></script>
<script type="text/javascript" src="<%=basePath%>jquery/jquery.uploadify.v2.1.0.min.js"></script>
jquery下载超大文件1、js代码：

  $(document).ready(
            function() {
                $("#uploadify").uploadify( {//初始化函数
                'uploader' : '<%=basePath %>images/uploadify.swf',//flash文件位置，注意路径
                'script' : '<%=basePath %>TemplateFileUploadServlet',//后台处理的请求(sevlet)
                'buttonImg':'<%=basePath%>images/addImage.jpg',//上传按钮的背景图片
                'auto' : true, //选定文件后是否自动上传，默认false
                'cancelImg' : '<%=basePath %>jquery/cancel.png',//取消按钮图片
                'folder' : '<%=basePath %>jquery/uploadsFolder',//您想将文件保存到的路径，将auto设置为true里才有用，不然跳到类里去处理，那就那里说了算
                'queueID' : 'fileQueue',//与下面的上传文件列表id对应
                'queueSizeLimit' : 8,//上传文件的数量
                'scriptData' : {
                                重庆web前端培训机构'userID' : '<%=UserID()%>'
                },//向后台传的数据
                'fileDesc' : 'rar文件或zip文件',//上传文件类型说明
                'fileExt' :'jpg,png,gif,jpeg', //控制可上传文件的扩展名，启用本项时需同时声明fileDesc
                'method' : 'get',//如果向后台传输数据，必须是get
                            //    'sizeLimit':1000000,//文件上传的大小限制，单位是字节
                'multi' : true,
                'simUploadLimit' : 8,//同时上传文件的数量，设置了这个参数后，那么你会因设置multi:true和queueSizeLimit：8而可以多选8个文件，但如果一旦你将simUploadLimit也设置了，那么只会上传这个参数指定的文件个数，其它就上传不了
                    'buttonText' : 'BROWSE',//浏览按钮上的文字
                    'onComplete' : function(event, queueID, fileObj,serverData, data) {//当上传完成后的回调函数，ajax方式哦~~
                            $('#bgImage').attr("src","<%=basePath%>"+serverData);//serverData是sevlet中out.print图片的路径
        　                    $('#bgImage').show();
                    },
                    'onError' : function(event, queueID, fileObj){
imported products        　  　                alert("文件:" + fileObj.name + " 上传失败");
                    }
                });
            });
       
Jsp页面上内容:
<body>
        <div id="fileQueue"></div>
        <input type="file" 在线教程免费name="uploadify" id="uploadify" />
        <p>
            <a href="javascript:jQuery('#uploadify').uploadifyUpload()">开始上传</a> 
            <a href="javascript:jQuery('#uploadify').uploadifyClearQueue()">取消所有上传</a>
        </p>
</body>
bootstrap4网页模板
  2、注意事项

  (1)、如果页面没有显示“BROWSE”按钮，则说明你的'uploader' : '<%=basePath%>images/uploadify.swf'配置不对，检查下路径是否正确。

  (2)、如果需要修改按钮的图片：可以使用'buttonImg'配置进行替换

  (3)、上传完成后，'onComplete'事件没有触发：在后台servlet处理完后，要向页面输出图片路径
1，否则页面的onComplete回调函数不会执行。Writer().write(1);
  (4)、如果在后台servlet处理上传将图片的名称改变的话，就不能通过fileObj获得它的值，而是要在后台servlet输出新文件 名：out.print(filename);在jsp页面要相应使用response来获得新值。

  (5)、图片预览实现：


  在jsp页面中添加一个<img src=""></img>,当上传完成后在onComplete事件中修改img的src值。

  3、下载地址

  www.uploadify/download/

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。