本例用了jquery.form.js请到演示页面查看
演示
CSS Code
- <style>
- form{display:block;margin:20pxauto;background:#eee;border-radius:10px;padding:15px}
- #progress{position:relative;width:400px;border:1pxsolid#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
<formid="myForm"action="upload.php"method="post"enctype="multipart/form-data">
- inputtype="file"size="60"name="myfile">
- inputtype="submit"value="AjaxFileUpload">
- </form>
- divid="progress">
- divid="bar"></div>
- divid="percent">0%</div>
- div>
- <div id="message"></div>
JavaScript Code
<script>
- $(document).ready(function()
- {
- varoptions={
- beforeSend:function()
- $("#progress").show();
- $("#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("<fontcolor='green'>"+response.responseText+"</font>");
- error:function()
- $("#message").html("<fontcolor='red'>ERROR:unabletouploadfiles</font>");
- }
- };
- $("#myForm").ajaxForm(options);
- });
- </script>
upload.php
PHP Code
<?php
- $output_dir="../upload/";
- if(isset($_FILES["myfile"]))
- if($_FILES["myfile"]["error"]>0)
- echo"Error:".$_FILES["file"]["error"]."<br>";
- else
- move_uploaded_file($_FILES["myfile"]["tmp_name"],$output_dir.$_FILES["myfile"]["name"]);
- echo"UploadedFile:".$_FILES["myfile"]["name"];
- }
- ?>
原文地址:http://www.freejs.net/article_biaodan_92.html
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
