插件描述：html5文件上传插件Pure HTML5 file upload
HTML5上传教程：今天我们将开发一个HTML5表单的文件上传带进度条和预览（在客户端）。之前已经给了你jQuery为基础的解决方案，但今天的应用不需要jQuery。所有的纯HTML5 JavaScript制作。我要用FileReader（HTML5）来实现实时预览和要使用XMLHttpRequest发送数据到服务器。
好，下载的资源，让我们开始！
步骤1.HTML
在这个页面你可以看到上传图像的形式
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | <html > <head> <meta charset="utf-8" /> <title>Pure HTML5 file upload | Script Tutorials</title> <link href="css/main.css" rel="stylesheet" type="text/css" /> <script src="js/script.js"></script> </head> <body> <header> <h2>Pure HTML5 file upload</h2> </header> <div> <div><h2>You can select the file (image) and click Upload button</h2></div> <div> <form id="upload_form" enctype="multipart/form-data" method="post" action="upload.php"> <div> <div><label for="image_file">Please select image file</label></div> <div><input type="file" name="image_file" id="image_file" onchange="fileSelected();" /></div> </div> <div> <input type="button" value="Upload" onclick="startUploading()" /> </div> <div id="fileinfo"> <div id="filename"></div> <div id="filesize"></div> <div id="filetype"></div> <div id="filedim"></div> </div> <div id="error">You should select valid image files only!</div> <div id="error2">An error occurred while uploading the file</div> <div id="abort">The upload has been canceled by the user or the browser dropped the connection</div> <div id="warnsize">Your file is very big. We can't accept it. Please select more small file</div> <div id="progress_info"> <div id="progress"></div> <div id="progress_percent"> </div> <div></div> <div> <div id="speed"> </div> <div id="remaining"> </div> <div id="b_transfered"> </div> <div></div> </div> <div id="upload_response"></div> </div> </form> <img id="preview" /> </div> </div> </body></html> |
步骤2.CSS
CSS / main.css
我已经选择了所有必要的方式为我们的HTML5上传表单
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 | .upload_form_cont { background: -moz-linear-gradient(#ffffff, #f2f2f2); background: -ms-linear-gradient(#ffffff, #f2f2f2); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2)); background: -webkit-linear-gradient(#ffffff, #f2f2f2); background: -o-linear-gradient(#ffffff, #f2f2f2); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f2f2f2'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f2f2f2')"; background: linear-gradient(#ffffff, #f2f2f2); color:#000; overflow:hidden;}#upload_form { float:left; padding:20px; width:700px;}#preview { background-color:#fff; display:block; float:right; width:200px;}#upload_form > div { margin-bottom:10px;}#speed,#remaining { float:left; width:100px;}#b_transfered { float:right; text-align:right;}.clear_both { clear:both;}input { border-radius:10px; -moz-border-radius:10px; -ms-border-radius:10px; -o-border-radius:10px; -webkit-border-radius:10px; border:1px solid #ccc; font-size:19px; padding:5px 10px;}input[type=button] { background: -moz-linear-gradient(#ffffff, #dfdfdf); background: -ms-linear-gradient(#ffffff, #dfdfdf); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #dfdfdf)); background: -webkit-linear-gradient(#ffffff, #dfdfdf); background: -o-linear-gradient(#ffffff, #dfdfdf); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dfdfdf'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dfdfdf')"; background: linear-gradient(#ffffff, #dfdfdf);}#image_file { width:400px;}#progress_info { font-size:13px;}#fileinfo,#error,#error2,#abort,#warnsize { color:#aaa; display:none; font-size:13px; font-style:italic; margin-top:10px;}#progress { border:1px solid #ccc; display:none; float:left; height:14px; border-radius:10px; -moz-border-radius:10px; -ms-border-radius:10px; -o-border-radius:10px; -webkit-border-radius:10px; background: -moz-linear-gradient(#66cc00, #4b9500); background: -ms-linear-gradient(#66cc00, #4b9500); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #66cc00), color-stop(100%, #4b9500)); background: -webkit-linear-gradient(#66cc00, #4b9500); background: -o-linear-gradient(#66cc00, #4b9500); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#66cc00', endColorstr='#4b9500'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#66cc00', endColorstr='#4b9500')"; background: linear-gradient(#66cc00, #4b9500);}#progress_percent { float:right;}#upload_response { margin-top: 10px; padding: 20px; overflow: hidden; display: none; border: 1px solid #ccc; border-radius:10px; -moz-border-radius:10px; -ms-border-radius:10px; -o-border-radius:10px; -webkit-border-radius:10px; box-shadow: 0 0 5px #ccc; background: -moz-linear-gradient(#bbb, #eee); background: -ms-linear-gradient(#bbb, #eee); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #bbb), color-stop(100%, #eee)); background: -webkit-linear-gradient(#bbb, #eee); background: -o-linear-gradient(#bbb, #eee); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bbb', endColorstr='#eee'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#bbb', endColorstr='#eee')"; background: linear-gradient(#bbb, #eee);} |
步骤3. HTML5 JS
js/script.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！ 本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！ 如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
|