使用Jquery开源插件实现文件上传（带进度条）

来源：互联网发布：获取局域网mac地址命令编辑：程序博客网时间：2024/05/20 15:59

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><html>    <head>    <title>test</title>    <style type="text/css">    #progress{width:90%;margin:5%;}    </style>     <meta charset="utf-8">     <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" /><script type="text/javascript" src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>    <script type="text/javascript" src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>    <script src="style/upload/js/vendor/jquery.ui.widget.js"></script>    <script src="style/upload/js/jquery.iframe-transport.js"></script>    <script src="style/upload/js/jquery.fileupload.js"></script>    </head>     <body>        <input id="fileupload" type="file" name="image" data-url="admin/UploadImage.do">        <progress id="progress" value="0" max="100"></progress>          <script>        $(function () {        p = $("#progress");            $('#fileupload').fileupload({                dataType: 'json',                 progressall: function (e, data) {                    var progress = parseInt(data.loaded / data.total * 100, 10);                   p.val(progress);                },                 done: function(e, data) {                alert("上传成功");                }            });        });        </script>    </body></html>

0 0