ThinkPHP＋AJAX＋JQuery实现了图片不刷新页面上传by WuBin 武斌

<div class="form-group">
  <label for="" class="col-sm-3 control-label">创意草图</label>
  <form id="upload_picture" name="upload_picture" enctype="multipart/form-data">
      <!-- hidden crop params -->
      <input type="hidden" id="x1" name="x1" autocomplete="off" />
      <input type="hidden" id="y1" name="y1" autocomplete="off"/>
      <input type="hidden" id="x2" name="x2" autocomplete="off" />
      <input type="hidden" id="y2" name="y2" autocomplete="off" />
      <input type="file" name="file" id="image_file" onchange="fileSelectHandler()" />
  </form>
  <div class="error">注意：上传前，先截图</div>
  <div class="step2">
      <span class="img-box"><img id="preview" /></span>
      <div class="info"><!--文件大小、类型、图像尺寸、宽度、高度-->
        <input type="hidden" id="filesize" name="filesize" />
        <input type="hidden" id="filetype" name="filetype" />
        <input type="hidden" id="filedim" name="filedim" />
        <input type="hidden" id="w" name="w" />
        <input type="hidden" id="h" name="h" />
      </div>
      <!-- <input value="上传" class="btn btn-pic" /> -->
      <!-- <input type="button" name="b1" value="submit" onclick="pictureup()"> -->
  </div>
  <a id="btnpicture" class="btn btn-info" onclick="pictureup()">上传</a>
</div>

<script>
function pictureup(){
  checkForm();
  var data = new FormData();
  data.append('file',$('#image_file')[0].files[0]);
  var other_data = $('#upload_picture').serializeArray();
  $.each(other_data,function(key,input){
      data.append(input.name,input.value);
  });
  //console.log(data);
  $.ajax({
    url : "{:U('Home/PublicUpload/idea_picture_upload')}",
    type : 'POST',
    data : data,
    processData : false,
    contentType : false,
  }).done(function(result){
  		//这里根据返回json填写自己的信息
  });
}
</script>