下面是详细的攻略：

jQuery插件uploadify实现ajax效果的图片上传

介绍

uploadify是一款基于jQuery的文件上传插件，它采用flash和ajax技术实现了多文件的上传。其中，ajax技术实现的异步上传功能能够大大提高文件上传的用户体验。

安装

首先需要引入jQuery库文件和uploadify插件文件。在头部代码中添加如下代码即可：

<link href="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="jquery.uploadify.min.js"></script>
<link href="uploadify.css" rel="stylesheet" type="text/css" />

使用

在页面中添加一个input标签用于上传文件，并绑定uploadify方法，设置相关参数即可实现上传功能。

<input type="file" id="uploadify" name="uploadify">

$(function() {
  $('#uploadify').uploadify({
    'swf'            : 'uploadify.swf',
    'uploader'       : 'uploadify.php',
    'buttonText'     : '选择文件',
    'fileTypeExts'   : '*.jpg;*.png;*.gif',
    'fileSizeLimit'  : '2MB',
    'multi'          : true,
    'onUploadSuccess': function(file, data, response) {
        alert('上传成功');
    }
  });
});

参数说明：

• swf：设置uploadify.swf文件的URL路径，该文件是uploadify基于flash技术实现的文件上传功能；
• uploader：设置uploadify.php文件的URL路径，该文件是ajax异步上传图片的相关处理逻辑；
• buttonText：设置上传按钮的文本内容；
• fileTypeExts：设置允许上传的文件类型；
• fileSizeLimit：设置允许上传的文件大小上限；
• multi：设置是否允许多文件上传；
• onUploadSuccess：设置上传成功时的回调函数，一般用于提示用户上传成功。

示例

示例一：

<input type="file" id="uploadify" name="uploadify">
<div id="preview"></div>

$(function() {
  $('#uploadify').uploadify({
    'swf': 'uploadify.swf',
    'uploader': 'uploadify.php',
    'buttonText': '选择文件',
    'fileTypeExts': '*.jpg;*.png;*.gif',
    'fileSizeLimit': '2MB',
    'multi': true,
    'onUploadSuccess': function(file, data, response) {
      var img = $('<img>').attr('src', data).css({'width':'100px', 'height':'100px', 'margin-right':'10px'});
      $('#preview').append(img);
    }
  });
});

该示例通过上传图片后，将图片预览在页面中。

示例二：

<input type="file" id="uploadify" name="uploadify">
<button type="button" id="submit">提交</button>

$(function() {
  $('#uploadify').uploadify({
    'swf': 'uploadify.swf',
    'uploader': 'uploadify.php',
    'buttonText': '选择文件',
    'fileTypeExts': '*.jpg;*.png;*.gif',
    'fileSizeLimit': '2MB',
    'multi': true,
    'onUploadSuccess': function(file, data, response) {
      $('<input>').attr({
        'type': 'hidden',
        'name': 'image[]',
        'value': data
      }).appendTo('form');
    }
  });

  $('#submit').click(function() {
    $.ajax({
      url: 'submit.php',
      type: 'POST',
      dataType: 'json',
      data: $('form').serialize(),
      success: function(data) {
        alert(data.msg);
      },
      error: function(data) {
        alert('提交失败');
      }
    });
  });
});

该示例通过上传图片后，将图片地址写入隐藏域中，并通过ajax异步提交表单数据。