avatar-upload.js 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. $(document).ready(function() {
  2. var jcrop_api;
  3. function avatarJcrop($init)
  4. {
  5. // Most basic attachment example
  6. $('.avatar-item .avatar-uploader').Jcrop({
  7. setSelect:[ 0, 0, 200, 200 ],
  8. minSize:[100,100],
  9. //boxWidth: "400",
  10. aspectRatio:1,
  11. onChange: function (c) {
  12. $('#crop-x').val(c.x);
  13. $('#crop-y').val(c.y);
  14. $('#crop-w').val(c.w);
  15. $('#crop-h').val(c.h);
  16. }
  17. }, function() {
  18. jcrop_api = this;
  19. var thumbnail = this.initComponent('Thumbnailer', {
  20. width: 200,
  21. height: 200,
  22. });
  23. thumbnail.element.attr("style","top:0px;width:200px;height:200px");
  24. var thumbnail1 = this.initComponent('Thumbnailer', {
  25. width: 96,
  26. height: 96
  27. });
  28. thumbnail1.element.attr("style","top:220px;width:96px;height:96px");
  29. var thumbnail2 = this.initComponent('Thumbnailer', {
  30. width: 24,
  31. height: 24
  32. });
  33. thumbnail2.element.attr("style","top:340px;width:24px;height:24px");
  34. if($init) {
  35. jcrop_api.setOptions({ allowSelect: false });
  36. jcrop_api.ui.selection.remove();
  37. }
  38. });
  39. }
  40. try {
  41. avatarJcrop(true);
  42. } catch (err) {
  43. //忽略错误
  44. }
  45. $("#uploadFileInput").fileupload({
  46. url : uploadUrl,
  47. done : function(e, data) {
  48. $.each(data.result.files, function(index, file) {
  49. if (!file.error) {
  50. $(".avatar-item").html($('<img/>', {
  51. src : file.url,
  52. "class" : "avatar-uploader"
  53. }));
  54. $(".avatar-item").append($('<input/>', {"name": 'avatar-path',"value": file.path, "type":"hidden"}))
  55. avatarJcrop(false);
  56. } else {
  57. $.modal.error(file.errors)
  58. }
  59. });
  60. }
  61. });
  62. $("form.avatar-form").submit(function(event) {
  63. event.preventDefault();
  64. event.stopImmediatePropagation();
  65. var avatar = $("input[name='avatar-path']").val();
  66. if(!avatar) {
  67. return false;
  68. }
  69. var url = $(this).attr("action");
  70. $.ajax({
  71. type: "POST",
  72. url: url,
  73. data: {
  74. x: $('#crop-x').val(),
  75. y: $('#crop-y').val(),
  76. w: $('#crop-w').val(),
  77. h: $('#crop-h').val(),
  78. avatar:avatar
  79. },
  80. success: function(msg) {
  81. location.reload();
  82. }
  83. });
  84. return false;
  85. });
  86. });