thinkphp jquery实现图片上传和预览效果

下面是详细的攻略。首先，我们需要明确一下需要具备的技能和环境：

技能要求：
- 熟悉thinkphp的基本操作和使用
- 掌握jquery的基本操作和使用
- 能够使用HTML5的FormData和FileReader对象实现文件上传和预览功能

环境要求：
- PHP环境
- 浏览器支持HTML5
- 支持jquery的Web开发环境

接下来，我们将分步骤引导您完成整个过程。

第一步：HTML部分设计和代码编写

首先，我们将使用HTML5的input元素来实现文件上传的功能。可以参考下面的示例代码：

<form id="upload-form" enctype="multipart/form-data">
  <input type="file" name="file" id="file">
  <button type="submit" id="submit">上传</button>
</form>
<div id="preview"></div>

在这个示例中，我们使用了一个id为upload-form的表单，以便我们能够提交文件上传的请求。其中的input元素用于指定上传的文件，而button元素则表示提交按钮。此外，我们还使用了一个id为preview的div元素，在后面的步骤中，我们将在这里实时预览上传的图片。

第二步：实现文件上传

我们将使用jquery的ajax方法来实现文件上传。您可以参考下面的示例代码：

$('#submit').on('click', function(e) {
  e.preventDefault();
  var formData = new FormData($('#upload-form')[0]);
  $.ajax({
    url: '/upload.php', //上传处理URL地址
    type: 'POST',
    data: formData,
    cache: false,
    contentType: false,
    processData: false,
    success: function(data) {
      console.log(data);
      //上传成功后的处理逻辑
    },
    error: function(jqXHR, textStatus, errorThrown) {
      console.error('File upload failed: ' + textStatus);
    }
  });
});

在这个示例中，我们使用jquery的ajax方法来发送POST请求，通过FormData对象将文件数据提交到upload.php处理。需要注意的是，我们需要设置cache、contentType和processData这三个参数，以确保数据能够正确地传递到服务器。如果上传失败，我们会在error回调函数中打印错误信息。如果上传成功，我们会在success回调函数中处理服务器返回的数据。

第三步：实现预览功能

上传成功后，我们需要实现预览功能。我们将使用HTML5的FileReader对象来读取上传的图片，并将读取到的数据显示在页面上。您可以参考下面的示例代码：

$('#file').on('change', function() {
  var file = this.files[0];
  var reader = new FileReader();
  reader.onload = function(e) {
    $('#preview').html('<img src="' + e.target.result + '">');
  }
  reader.readAsDataURL(file);
});

在这个示例中，我们使用change事件来监听上传文件的变化。当文件发生变化时，我们读取文件并创建一个新的FileReader对象。当读取完成后，我们使用e.target.result得到读取到的二进制数据，并将其显示在id为preview的div元素中。如果上传的文件是图片，我们将在这里成功预览到上传后的图片。

至此，我们已经完成了整个过程。当上传图片完成并成功预览后，我们还可以对其进行一些特效处理，比如添加图片进入购物车等等操作。以上就是thinkphp jquery实现图片上传和预览效果的完整攻略，希望对您有所帮助。