FormDate使用实例

1.HTML代码:
        <div class="row">
            <label for="file">Upload Image:</label>
            <input type="file" name="fileToUpload" id="fileToUpload"  multiple="multiple" οnchange="fileSelected();" />
        </div>
        <div id="fileName">
        </div>
        <div id="fileSize">
        </div>
        <div id="fileType">
        </div> 
        <div class="row">
            <input type="button" οnclick="uploadFile()" value="Upload Image" />
        </div>
        <div id="progressNumber">
        </div>


2.js代码:
function fileSelected() {
            var file = document.getElementById('fileToUpload').files[0];
            if (file) {
                var fileSize = 0;
                if (file.size > 1024 * 1024)
                    fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
                else
                    fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
 
                document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
                document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
                document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
            }
        }
 
        function uploadFile() {
            var fd = new FormData();
            fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);
            var xhr = new XMLHttpRequest();
            xhr.upload.addEventListener("progress", uploadProgress, false);
            xhr.addEventListener("load", uploadComplete, false);
            xhr.addEventListener("error", uploadFailed, false);
            xhr.addEventListener("abort", uploadCanceled, false);
            xhr.open("POST", "Home/Upload");
            xhr.send(fd);
        }
 
        function uploadProgress(evt) {
            if (evt.lengthComputable) {
                var percentComplete = Math.round(evt.loaded * 100 / evt.total);
                document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
            }
            else {
                document.getElementById('progressNumber').innerHTML = 'unable to compute';
            }
        }
 
        function uploadComplete(evt) {
            /* This event is raised when the server send back a response */
            alert(evt.target.responseText);
        }
 
        function uploadFailed(evt) {
            alert("There was an error attempting to upload the file.");
        }
 
        function uploadCanceled(evt) {
            alert("The upload has been canceled by the user or the browser dropped the connection.");
        }

        
3.自己写得用jq得一个实例:
$("#id-btn-submit").click(function(){
            var action = $("#formContent").attr("action");
            var formData = new FormData();
            formData.append("user-file",$("#userfile")[0].files[0]);
            console.log(formData)
            if (formData == null) {
                return;
            }
            $.ajax({ 
                url : action, 
                type : 'post', 
                data : formData,
                dataType:"json",
                processData : false, 
                contentType : false,
                beforeSend:function(){
                    console.log("正在进行,请稍候");
                },
                success : function(data) { 
                    console.log(data);
                        if (data) {
                            alert("您的上传末班中这些重复了:"+data+",请重新输入!")
                        } else {
                            alert("上传成功")
                        }
                        
                }, 
                error : function(data) { 
                    console.log("程序崩了,555!");
                } 
            });
            return false;
        });

发布了48 篇原创文章 · 获赞 0 · 访问量 1887
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览