头像更改功能

Question

​

​

这是头像更改和上传。当我点击“上传新图像”按钮时，将出现浏览窗口，然后我选择一个头像，然后将显示所选头像。这个功能在Jquery中是可行的吗？

我的尝试：http://jsfiddle.net/anglimass/uBGpR/

任何人请帮帮我！！

谢谢

Answer 1

这可以使用AJAX Upload jQuery插件来完成。

首先包含jQuery和插件：

<script src="/js/jquery.min.js" type="text/javascript"></script>
<script src="/js/ajaxupload.js" type="text/javascript"></script>

最终的JavaScript：

$(document).ready(function(){

  var thumb = $('img#thumb'); 

  new AjaxUpload('imageUpload', {
    action: $('form#newHotnessForm').attr('action'),
    name: 'image',
    onSubmit: function(file, extension) {
      $('div.preview').addClass('loading');
    },
    onComplete: function(file, response) {
      thumb.load(function(){
        $('div.preview').removeClass('loading');
        thumb.unbind();
      });
      thumb.attr('src', response);
    }
  });
});

此示例取自this very good tutorial。