单张图片上传

展示图:

完整代码:

   ajax上传图片练习             //正面身份证 function picture() { var data = new FormData($('#form')[0]); /* new FormData 的意思  * 获取我们for表单中的所有input的name和value为了更方便传值 * https://segmentfault.com/a/1190000012327982?utm_source=tag-newest */ console.log(data); $.ajax({ url: "http://tp5-shopxo.likeball.top/index.php?s=/api/Mi/measurement", type: 'POST', data: data, dataType: 'JSON', cache: false, processData: false, contentType: false, success: function(data) { // console.log(data); if (data['whether']) {  var result = '';  var result1 = '';  result += '';  result1 += 'http://tp5-shopxo.likeball.top/' + data['site'];  $('#results').html(result);  $('#fronts').val(result1); } }, error: function(data) { alert('错误'); } }); }

tp控制器代码

public function measurement() {   $response = array();   //这是身份证正面  if ( isset( $_FILES['drawing'] ) && $_FILES['drawing']['error'] == 0 ) {   $drawing = request()->file('drawing');    $picture = $drawing->validate( ['ext'=>'jpg,png,gif'] )->move( ROOT_PATH . 'static' . DS . 'upload/mi/img' );  }  if ( isset( $picture ) ) {   $filePaths = '/static' . DS . 'upload/mi/img/'. $picture->getSaveName();   $response['whether'] = true;   $response['site'] = $filePaths;   echo json_encode($response);   }  // 正面结束 }

多个上传

展示:

完整代码:

   文件上传  #front { width: 120px; height: 120px; background-color: #8A6DE9; } #frontage { width: 120px; height: 120px; background-color: #8A6DE9; } #banking { width: 120px; height: 120px; background-color: #8A6DE9; } #house { width: 120px; height: 120px; background-color: #8A6DE9; }       

身份证正面:

身份证反面:

银行卡正面:

银行卡反面:

function identity() { var formData = new FormData(); formData.append("drawing", $('#drawing')[0].files[0]); // console.log(formData); $.ajax({ url: "http://tp5-shopxo.likeball.top/index.php?s=/api/Mi/measurement", type: 'POST', data: formData, dataType: 'JSON', cache: false, processData: false, contentType: false, success: function(data) { console.log(data); if (data['whether'] == true) { var result = ''; var result1 = ''; result += ''; result1 += 'http://tp5-shopxo.likeball.top/' + data['site']; $('#front').html(result); $('#fronts').val(result1); } }, error: function(data) { console.log("错误"); } }); } function card() { var formData = new FormData(); formData.append("reverse", $('#reverse')[0].files[0]); // console.log(formData); $.ajax({ url: "http://tp5-shopxo.likeball.top/index.php?s=/api/Mi/measurement", type: 'POST', data: formData, dataType: 'JSON', cache: false, processData: false, contentType: false, success: function(data) { console.log(data); if (data['whether'] == true) { var result = ''; var result1 = ''; result += ''; result1 += 'http://tp5-shopxo.likeball.top/' + data['site']; $('#frontage').html(result); $('#frontages').val(result1); } }, error: function(data) { console.log("错误"); } }); } function obverse() { var formData = new FormData(); formData.append("transaction", $('#transaction')[0].files[0]); // console.log(formData); $.ajax({ url: "http://tp5-shopxo.likeball.top/index.php?s=/api/Mi/measurement", type: 'POST', data: formData, dataType: 'JSON', cache: false, processData: false, contentType: false, success: function(data) { console.log(data); if (data['whether'] == true) { var result = ''; var result1 = ''; result += ''; result1 += 'http://tp5-shopxo.likeball.top/' + data['site']; $('#banking').html(result); $('#bankings').val(result1); } }, error: function(data) { console.log("错误"); } }); } function versa() { var formData = new FormData(); formData.append("redlining", $('#redlining')[0].files[0]); // console.log(formData); $.ajax({ url: "http://tp5-shopxo.likeball.top/index.php?s=/api/Mi/measurement", type: 'POST', data: formData, dataType: 'JSON', cache: false, processData: false, contentType: false, success: function(data) { console.log(data); if (data['whether'] == true) { var result = ''; var result1 = ''; result += ''; result1 += 'http://tp5-shopxo.likeball.top/' + data['site']; $('#house').html(result); $('#houses').val(result1); } }, error: function(data) { console.log("错误"); } }); }

tp控制器中

public function measurement() {   $response = array();   //这是身份证正面  if ( isset( $_FILES['drawing'] ) && $_FILES['drawing']['error'] == 0 ) {   $drawing = request()->file('drawing');    $picture = $drawing->validate( ['ext'=>'jpg,png,gif'] )->move( ROOT_PATH . 'static' . DS . 'upload/mi/img' );  }  if ( isset( $picture ) ) {   $filePaths = '/static' . DS . 'upload/mi/img/'. $picture->getSaveName();   $response['whether'] = true;   $response['site'] = $filePaths;   echo json_encode($response);   }  // 正面结束  // 这是反面  if ( isset( $_FILES['reverse'] ) && $_FILES['reverse']['error'] == 0 ) {   $reverse = request()->file('reverse');    $reverse = $reverse->validate( ['ext'=>'jpg,png,gif'] )->move( ROOT_PATH . 'static' . DS . 'upload/mi/img' );  }  if ( isset( $reverse ) ) {   $contrary = '/static' . DS . 'upload/mi/img/'. $reverse->getSaveName();   $response['whether'] = true;   $response['site'] = $contrary;   echo json_encode($response);   }  //银行卡正面  if ( isset( $_FILES['transaction'] ) && $_FILES['transaction']['error'] == 0 ) {   $transaction = request()->file('transaction');    $transaction = $transaction->validate( ['ext'=>'jpg,png,gif'] )->move( ROOT_PATH . 'static' . DS . 'upload/mi/img' );  }  if ( isset( $transaction ) ) {   $stuck = '/static' . DS . 'upload/mi/img/'. $transaction->getSaveName();   $response['whether'] = true;   $response['site'] = $stuck;   echo json_encode($response);   }  //银行卡反面  if ( isset( $_FILES['redlining'] ) && $_FILES['redlining']['error'] == 0 ) {   $redlining = request()->file('redlining');    $redlining = $redlining->validate( ['ext'=>'jpg,png,gif'] )->move( ROOT_PATH . 'static' . DS . 'upload/mi/img' );  }  if ( isset( $redlining ) ) {   $other = '/static' . DS . 'upload/mi/img/'. $redlining->getSaveName();   $response['whether'] = true;   $response['site'] = $other;   echo json_encode($response);   } }

总结

以上所述是小编给大家介绍的ThinkPHP5 通过ajax插入图片并实时显示,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!