本例用了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"];??
- ????}??
- ??
- }??
- ?>??
?
原文地址:http://www.freejs.net/article_biaodan_92.html