清华大佬耗费三个月吐血整理的几百G的资源，免费分享！....>>>

<无详细内容>

<form action="upload.php" method="post" enctype="multipart/form-data">
UPLOAD USER-ICON:<input name="icon" id="icon" type="file" placeholder="请上传PNG格式的图像(大小在1M之内)"/><br/>
<input type="submit" value="上传"/>
</form>

<section id="main-content">
                
                <h2>文件上传(可预览)</h2>
                <p>
浏览和上传多个文件在一个去按住Ctrl(Windows、Linux)或命令(Mac)当点击他们的文件对话框,或拖放文件。上传文件的信息将是下面列出的。注意:Safari似乎无法读出任何信息关于实际的文件                </p>
                
                <h3>选择图片(>=1)</h3>
                <p>
                    <input id="files-upload" type="file"  multiple="multiple"/>
                    <!-- multiple="multiple" -->
                </p>
                <p id="drop-area">
                    <span class="drop-instructions">投放文件到这里</span>
                    <span class="drop-over">拖动文件到此处!</span>
                </p>
                
                <ul id="file-list">
                    <li class="no-items">(没有上传文件)</li>
                </ul>
                <script>
                    (function () {
                        var filesUpload = document.getElementById("files-upload"),
                            dropArea = document.getElementById("drop-area"),
                            fileList = document.getElementById("file-list");
                            
                        function uploadFile (file) {
                            var li = document.createElement("li"),
                                div = document.createElement("div"),
                                img,
                                progressBarContainer = document.createElement("div"),
                                progressBar = document.createElement("div"),
                                reader,
                                xhr,
                                fileInfo;
                                
                            li.appendChild(div);
                            
                            progressBarContainer.className = "progress-bar-container";
                            progressBar.className = "progress-bar";
                            progressBarContainer.appendChild(progressBar);
                            li.appendChild(progressBarContainer);
                            
                            /*
                                If the file is an image and the web browser supports FileReader,
                                present a preview in the file list
                            */
                            if (typeof FileReader !== "undefined" && (/image/i).test(file.type)) {
                                img = document.createElement("img");
                                li.appendChild(img);
                                reader = new FileReader();
                                reader.onload = (function (theImg) {
                                    return function (evt) {
                                        theImg.src = evt.target.result;
                                    };
                                }(img));
                                reader.readAsDataURL(file);
                            }
                            
                            // Uploading - for Firefox, Google Chrome and Safari
                            xhr = new XMLHttpRequest();
                            
                            // Update progress bar
                            xhr.upload.addEventListener("progress", function (evt) {
                                if (evt.lengthComputable) {
                                    progressBar.style.width = (evt.loaded / evt.total) * 100 + "%";
                                }
                                else {
                                    // No data to calculate on
                                }
                            }, false);
                            
                            // File uploaded
                            xhr.addEventListener("load", function () {
                                progressBarContainer.className += " uploaded";
                                progressBar.innerHTML = "Uploaded!";
                            }, false);
                            
                            xhr.open("post", "upload/upload.php", true);
                            
                            // Set appropriate headers
                            xhr.setRequestHeader("Content-Type", "multipart/form-data");
                            xhr.setRequestHeader("X-File-Name", file.name);
                            xhr.setRequestHeader("X-File-Size", file.size);
                            xhr.setRequestHeader("X-File-Type", file.type);

                            // Send the file (doh)
                            xhr.send(file);
                            
                            // Present file info and append it to the list of files
                            fileInfo = "<div><strong>Name:</strong> " + file.name + "</div>";
                            fileInfo += "<div><strong>Size:</strong> " + parseInt(file.size / 1024, 10) + " kb</div>";
                            fileInfo += "<div><strong>Type:</strong> " + file.type + "</div>";
                            div.innerHTML = fileInfo;
                            
                            fileList.appendChild(li);
                        }
                        
                        function traverseFiles (files) {
                            if (typeof files !== "undefined") {
                                for (var i=0, l=files.length; i<l; i++) {
                                    uploadFile(files[i]);
                                }
                            }
                            else {
                                fileList.innerHTML = "No support for the File API in this web browser";
                            }   
                        }
                        
                        filesUpload.addEventListener("change", function () {
                            traverseFiles(this.files);
                        }, false);
                        
                        dropArea.addEventListener("dragleave", function (evt) {
                            var target = evt.target;
                            
                            if (target && target === dropArea) {
                                this.className = "";
                            }
                            evt.preventDefault();
                            evt.stopPropagation();
                        }, false);
                        
                        dropArea.addEventListener("dragenter", function (evt) {
                            this.className = "over";
                            evt.preventDefault();
                            evt.stopPropagation();
                        }, false);
                        
                        dropArea.addEventListener("dragover", function (evt) {
                            evt.preventDefault();
                            evt.stopPropagation();
                        }, false);
                        
                        dropArea.addEventListener("drop", function (evt) {
                            traverseFiles(evt.dataTransfer.files);
                            this.className = "";
                            evt.preventDefault();
                            evt.stopPropagation();
                        }, false);                                      
                    })();
                </script>
                
            </section>