2016-09-29 18:46
采纳率: 100%
浏览 277


I have a form with which I upload images using AJAX to a PHP Script

This is my form

<form action ="upload.php" method = "POST" enctype = "multipart/form-data" class = "form-horizontal" name="formData" id="data">
        <!--File Upload-->
            <div class = "form-group">
                <label class="control-label col-sm-1" for = "file">File:</label>    
                    <div class="col-sm-9">
                        <input type = "file" name = "image_file" id = "image_file"  class = "form-control" accept="image/*" onChange="autoPull(this.value)";>
            <div class = "form-group">
                <label class="control-label col-sm-1" for = "project_name">ProjectName:</label>
                    <div class="col-sm-9">
                        <input type = "text" name ="project_name" id = "project_name" class = "form-control" placeholder="Enter Project Name"  value = "" required>
            <div class = "button">
                <div class="form-group">
                    <div class="col-sm-offset-1 col-sm-6">
                        <input type="submit" name = "submit" class="btn btn-primary" value = "Submit" id="file_upload">
                        <input type="reset" name = "submit" class="btn btn-default" value = "Reset">
            <div class="progress" style="display:none;">
              <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%;">

        <div id = "result"></div>

The result div is where the output from PHP is displayed(see in AJAX)

Progress bar is where I wish to see my bootstrap progress bar.

and this is my AJAX

$(function () {
        $('form#data').submit(function (e){
            var formData = new FormData($(this)[0]);
            var file = $('input[type=file]')[0].files[0];
                xhr: function() {
                    var xhr = new window.XMLHttpRequest();
                    xhr.upload.addEventListener("progress", function(evt) {
                        if (evt.lengthComputable) {
                            var percentComplete = evt.loaded / evt.total;
                            percentComplete = parseInt(percentComplete * 100);
                            if (percentComplete === 100) {

                    }, false);
                    return xhr;
                url: 'upload.php',
                data: formData,
                contentType: false,
                processData: false,
                success: function (returndata) {
            return false;

Now I get an output which shows me the data echoed in the PHP. But for some reason I cant get the progress bar to work.

What could be the issue?

  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 邀请回答

2条回答 默认 最新

相关推荐 更多相似问题