« jQuery对象与dom对象的转换 回忆我的建站历史 »

Discuz!多附件上传选择框之jQuery版

看Discuz!附件上传时候的选择框做的很不错
就拿jQuery练手顺手写了一个
jQuery多附件上传的演示效果就如Discuz!的上传选择框是一样的,不同的只是代码,现在拿出来给大家分享一下。:)

代码如下:

  1. var aid = 1;
  2. var attachexts = new Array();
  3. var attachwh = new Array();
  4.  
  5. function addAttach() {
  6. newnode = $("#attachbodyhidden > tr").clone();
  7. var id = aid;
  8. var tags;
  9. tags = newnode.find("input");
  10. for(i in tags) {
  11. if(tags[i].name == 'attach[]') {
  12. tags[i].id = 'attach_' + id;
  13. tags[i].onchange = function() {insertAttach(id)};
  14. tags[i].unselectable = 'on';
  15. }
  16. if(tags[i].name == 'localid[]') {
  17. tags[i].value = id;
  18. }
  19. }
  20. tags = newnode.find("span");
  21. for(i in tags) {
  22. if(tags[i].id == 'localfile[]') {
  23. tags[i].id = 'localfile_' + id;
  24. }
  25. }
  26. aid++;
  27. $("#attachbody").append(newnode);
  28. }
  29.  
  30.  
  31. function insertAttach(id) {
  32. var localimgpreview = '';
  33. var path = $("#attach_" + id).attr("value");
  34. var ext = path.lastIndexOf('.') == -1 ? '' : path.substr(path.lastIndexOf('.') + 1, path.length).toLowerCase();
  35. var re = new RegExp("(^|\\s|,)" + ext + "($|\\s|,)", "ig");
  36. var localfile = $("#attach_" + id).attr("value").substr($("#attach_" + id).attr("value").replace(/\\/g, '/').lastIndexOf('/') + 1);
  37. attachexts[id] = in_array(ext, ['gif', 'jpg', 'png', 'bmp']) ? 2 : 1;
  38.  
  39. $("#localfile_" + id).html('<a href="###delAttach" onclick="delAttach(' + id + ')">[' + lang['post_attachment_deletelink'] + ']</a> <a href="###insertAttach" title="' + lang['post_attachment_insert'] + '" onclick="insertAttachtext(' + id + ', ' + attachexts[id] + ');return false;">[' + lang['post_attachment_insertlink'] + ']</a> <span id="localimgpreview_' + id + '" > </span><span class="smalltxt">[' +id + ']</span> ' + localfile + '');
  40. $("#attach_" + id).css("display",'none');//style.display = 'none';
  41. addAttach();
  42. }
  43.  
  44. function delAttach(id) {
  45. $("#attach_" + id).parent().parent().remove();
  46. $("#attachbody").html() == '' && addAttach();
  47. }
  48.  
  49. $(document).ready(function() {
  50. addAttach();
  51. });

回复留言

*
To prove you're a person (not a spam script), type the security word shown in the picture.
Anti-Spam Image

你可以使用XHTML标签: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>