上传文件 | Blend-Zlq

本篇讲述前台上传文件以及后台的处理

HTML

1
2
3

<form method="post" id="form" enctype="multipart/form-data">
    <input type="file" name="file" style="display:none">
</form>

提交到服务器

var form = $('#form');
var formData = new FormData(form[0]);
formData.append('id', '1');
$.ajax({
    url: '...',
    processData: false,
    contentType: false,
    type: 'post',
    data: formData,
    success: function (data) {
    }
});

本地预览上传的文件

$('input:file').on('change',function(){
  $(this).parent().find('img').remove();
  var file = this.files[0];
  var img = $('<img>');
  img.get(0).file = file;
  $(this).parent().append(img);
  var reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = (function(img){
    return function(img){
        img.src = e.target.result;
    };
  })(img)
});

php处理上传文件

1
2
3

$src = $_FILES['file']['tmp_name'];
$dist = APP . '/static/imgs/' . $_FILES['file']['name'];
move_uploaded_file($src, $dist);

本文总阅读量次