jquery图片上传和删除

jQuery是一个JavaScript库，可以非常方便地处理图片上传和删除。以下是一个简单的示例代码：

HTML代码：

<form id="upload-form" action="upload.php" method="post" enctype="multipart/form-data">
  <input type="file" name="image" id="image">
  <button type="submit" id="upload-btn">上传</button>
</form>

<div id="image-container"></div>

jQuery代码：

$(document).ready(function() {
  // 上传图片
  $('#upload-form').submit(function(event) {
    event.preventDefault(); // 防止表单提交
    var formData = new FormData($(this)[0]);
    $.ajax({
      url: $(this).attr('action'),
      type: $(this).attr('method'),
      data: formData,
      dataType: 'json',
      processData: false,
      contentType: false,
      success: function(response) {
        $('#image-container').append('<img src="' + response.image_url + '">');
      }
    });
  });

  // 删除图片
  $(document).on('click', '.delete-btn', function() {
    var imageId = $(this).data('image-id');
    $.ajax({
      url: 'delete.php',
      type: 'post',
      data: {id: imageId},
      dataType: 'json',
      success: function(response) {
        if (response.success) {
          $('#image-' + imageId).remove();
        }
      }
    });
  });
});

在上面的示例中，我们使用了jQuery的`$.ajax()`方法来进行异步上传和删除图片。当用户上传图片时，我们使用`FormData`对象来构建表单数据，并将其用作`data`选项。我们还使用`processData`和`contentType`选项来防止jQuery将表单数据转换为字符串类型。

在上传成功后，我们向`#image-container`元素添加一个新的图片标签，其`src`属性为所上传图片的URL。对于删除图片，我们使用`data`属性来传递要删除的图片ID，然后从DOM中删除该图片。

需要注意的是，这只是一个简单的示例，实际上还需要进行安全性检查和错误处理等操作。