jquery实现输入框上传图片文件

可以使用jQuery的change事件监听文件选择框的变化，然后通过FormData对象将文件数据发送到后台。

HTML代码：

<input type="file" id="uploadFile">
<div id="preview"></div>

jQuery代码：

// 监听文件选择框的变化
$('#uploadFile').change(function() {
  var file = this.files[0]; // 获取文件对象
  var formData = new FormData(); // 创建一个FormData对象
  formData.append('file', file); // 将文件对象添加到FormData中

  // 发送Ajax请求
  $.ajax({
    url: '/upload',
    type: 'POST',
    data: formData,
    processData: false,
    contentType: false,
    success: function(data) {
      // 文件上传成功后的处理逻辑
      $('#preview').html('<img src="' + data.url + '">');
    },
    error: function() {
      // 文件上传失败后的处理逻辑
      alert('文件上传失败！');
    }
  });
});

注意事项：

- processData和contentType需要设置为false，以便让jQuery不对FormData进行处理。
- 文件上传成功后，服务器需要返回一个包含上传文件路径的JSON对象。