一个简单的ajax上传 上传进度显示
本例用了jquery.form.js请到演示页面查看
CSS Code
- <style>
- form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px }
- #progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
- #bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
- #percent { position:absolute; display:inline-block; top:3px; left:48%; }
- </style>
XML/HTML Code
- <form id="myForm" action="upload.php" method="post" enctype="multipart/form-data">
- <input type="file" size="60" name="myfile">
- <input type="submit" value="Ajax File Upload">
- </form>
- <div id="progress">
- <div id="bar"></div>
- <div id="percent">0%</div >
- </div>
- <div id="message"></div>
JavaScript Code
- <script>
- $(document).ready(function()
- {
- var options = {
- beforeSend: function()
- {
- $("#progress").show();
- //clear everything
- $("#bar").width('0%');
- $("#message").html("");
- $("#percent").html("0%");
- },
- uploadProgress: function(event, position, total, percentComplete)
- {
- $("#bar").width(percentComplete+'%');
- $("#percent").html(percentComplete+'%');
- },
- success: function()
- {
- $("#bar").width('100%');
- $("#percent").html('100%');
- },
- complete: function(response)
- {
- $("#message").html("<font color='green'>"+response.responseText+"</font>");
- },
- error: function()
- {
- $("#message").html("<font color='red'> ERROR: unable to upload files</font>");
- }
- };
- $("#myForm").ajaxForm(options);
- });
- </script>
upload.php
PHP Code
- <?php
- $output_dir = "../upload/";
- if(isset($_FILES["myfile"]))
- {
- //Filter the file types , if you want.
- if ($_FILES["myfile"]["error"] > 0)
- {
- echo "Error: " . $_FILES["file"]["error"] . "<br>";
- }
- else
- {
- //move the uploaded file to uploads folder;
- move_uploaded_file($_FILES["myfile"]["tmp_name"],$output_dir. $_FILES["myfile"]["name"]);
- echo "Uploaded File :".$_FILES["myfile"]["name"];
- }
- }
- ?>
相关推荐
周公周金桥 2020-09-06
大象从不倒下 2020-07-31
AlisaClass 2020-07-19
MaureenChen 2020-04-21
xingguanghai 2020-03-13
teresalxm 2020-02-18
木四小哥 2013-05-14
SoShellon 2013-06-01
Simagle 2013-05-31
羽化大刀Chrome 2013-05-31
waterv 2020-01-08
LutosX 2013-07-29
vanturman 2013-06-27
wutongyuq 2013-04-12
luoqu 2013-04-10
today0 2020-09-22
89520292 2020-09-18
bigname 2020-08-25