1. 程式人生 > >使用Jquery開源外掛實現檔案上傳(帶進度條)

使用Jquery開源外掛實現檔案上傳(帶進度條)

<%@ 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>