fileupload不能在阿賈克斯工作

Question

我有文件上傳表格字段，我選擇一個gif'，'PNG'，'jpg'表示它會工作，我選擇任何其他文件.mp3，.php文件它會給出這樣的錯誤**SyntaxError: JSON.parse: unexpected non-whitespace character after JSON data at line 1 column 73 of the JSON data**。我想文件類型檢查和文件大小之後，我想插入的值，但不知道如何做到這一點，我認爲我的PHP代碼應該是錯的...

<?php 
 
$filename = basename($_FILES['file']['name']); 
 
$extension = pathinfo($filename, PATHINFO_EXTENSION); 
 
$new_name= md5($filename.time()).'.'.$extension; 
 
if (move_uploaded_file($_FILES['file']['tmp_name'], "horoscope/".$new_name)) { 
 
\t // FILE TYPE CHECKING 
 
\t $allowed = array('gif','png' ,'jpg'); 
 
\t if(!in_array($extension,$allowed)) { 
 
\t \t $newuser = array('photoname' => $new_name, "message" => "error"); 
 
\t \t if($_FILES['file']['size'] > 2459681){ 
 
\t \t \t $newuser = array('photoname' => $new_name, "message" => "filesize is to large"); 
 
\t \t }else{ 
 
\t \t \t $newuser = array('photoname' => $new_name, "message" => "success"); 
 
\t \t } 
 
\t \t echo json_encode($newuser); 
 
\t } 
 
\t else{ 
 
\t \t $newuser = array('photoname' => $new_name, "message" => "success"); 
 
\t } 
 
\t echo json_encode($newuser); 
 

 
}else{ 
 
\t //echo "Error"; 
 
\t $newuser = array("message" => "file is not moving"); 
 
\t echo json_encode($newuser); 
 
} \t 
 
?> 
 
    <script type="text/javascript"> 
 
        $(document).ready(function(){ 
 
        $("#user-submit").click(function(event){ 
 
         event.preventDefault(); 
 
         if($("form#newUserForm").valid()){ 
 
         var formData = new FormData(); 
 
         var formData = new FormData($('#newUserForm')[0]); 
 
         formData.append('file', $('input[type=file]')[0].files[0]); 
 
         $.ajax({ 
 
         url: 'horoscope-check.php', 
 
         type: 'POST', 
 
         data: formData, 
 
         async: false, 
 
         cache: false, 
 
         contentType: false, 
 
         processData: false, 
 
         success: function (data) { 
 
          var res=jQuery.parseJSON(data);// convert the json 
 
          console.log(res); 
 
         }, 
 
         
 
        }); 
 

 
         return false; 
 
         }else{ 
 
         console.log("false"); 
 
         } 
 
        }); 
 
        }); 
 
       </script>

<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">Photo Upload</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" value="" aria-required="true" required="" data-msg-required="Please select your 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" type="submit" id="user-submit">Submit</button> 
 
      </div> 
 
      </div> 
 
     </form>

Answer 1

使用xhr（）可以解決您的問題...例如： -

var formData = new FormData($('#newUserForm')[0]); 
$.ajax({ 
url: 'horoscope-check.php', 
type: 'POST', 
data: formData, 
async: false, 
xhr: function() { 
    var myXhr = $.ajaxSettings.xhr(); 
    //if you want progress report otherwise you can remove this part from here to 
    myXhr.upload.addEventListener("progress", function(evt){ 
     if (evt.lengthComputable) { 
     var percentComplete = (evt.loaded/evt.total) * 100 ; 
     percentComplete = Math.round(percentComplete); 
     $("#progress").text(percentComplete + " %"); 
     } 
    }, false); 
    //here 
    return myXhr; 
}, 
cache: false, 
contentType: false, 
processData: false, 
success: function (data) { 
    var res=jQuery.parseJSON(data);// convert the json 
    console.log(res); 
}, 

});