fileupload在twitter bootstrap中不起作用

时间:2016-03-10 13:38:33

标签: javascript php ajax

我正在使用twitter bootstrap文件上传,我想将图像存储在databese上,而且我想在一个文件夹中移动,我花了很多次,我无法获得文件名值。看here输入名字并在提交表格后选择一张图片,现在我得到名字值,但我无法获得照片上传价值......

<form class="form-horizontal form-bordered" method="POST" id="newUserForm" enctype="multipart/form-data">

                       <div class="form-group">
                           <label class="col-md-3 control-label">First Name<span class="star_mark">&nbsp;*</span></label>
                          <div class="col-sm-6">
                           <input type="text" class="form-control" id="fname" name="fname" value="" aria-required="true" required="" data-msg-required="Please enter your firstname" placeholder="Enter your firstname">

                          </div>
                      </div>
 <div class="form-group">
                      <label class="col-md-3 control-label">Photo Upload<span class="star_mark">&nbsp;*</span></label>
                      <div class="col-md-6">
                      <div class="fileupload fileupload-new" data-provides="fileupload">
                      <div class="input-append">
                      <div class="uneditable-input">
                      <i class="fa fa-file fileupload-exists"></i>
                      <span class="fileupload-preview"></span>
                      </div>
                      <span class="btn btn-default btn-file">
                      <span class="fileupload-exists">Change</span>
                      <span class="fileupload-new">Select file</span>
                       <input type="file" id="file" name="file">
                      </span>

                      <a href="#" class="btn btn-default fileupload-exists" data-dismiss="fileupload">Remove</a>
                      </div>
                      </div>
                      </div>
                      </div>

                      <div class="form-group">
                      <div class="col-sm-offset-3 col-sm-6">
                     <button class="btn btn-info btn-block" type="submit" id="user-submit">Submit</button>
                      </div>
                      </div>
                      </form>

<script type="text/javascript">
               $(document).ready(function(){
                $('#user-submit').click(function(event){
                    event.preventDefault();
                  if($('#newUserForm').valid()){
                    //console.log('success');
                     $.ajax({
                     type:'POST',
                     url :"php/register-newuser.php",
                     data: $('form#newUserForm').serialize(),
                     success: function(data) {
                        //var res=jQuery.parseJSON(data);// convert the json
                        console.log(data);

                     },
                     error:function(exception){
                     alert('Exeption:'+exception);
                    }
                  }); 

                     }
                else{

                  console.log('please select all fields');

                }
                });
              });
            </script>

寄存器newuser.php

$fstname=$_POST['fname'];// i got ans here
$filename  = basename($_FILES['file']['name']);
$newuser = array("fstName" => $fstname,'photoname' => $filename);
echo json_encode($newuser);
print_r($_FILES)//means nothing will happen, i didn't get any value like filename,size,extension....

1 个答案:

答案 0 :(得分:0)

要使用AJAX进行上传,您可以使用jquery插件,例如this one。 Bootstrap与上传无关。