2013-02-09 83 views
2

我正在配置blueimp上傳圖片點擊發布按鈕。我的問題是它沒有調用$('#fileupload').fileupload函數。我已經包含以下JavaScript文件。以下是我的代碼,請看看有什麼問題。

<head> 
    <script type="text/javascript" src="../../js/jquery.min.js"></script> 
    <script type="text/javascript" src="../../js/jquery-ui.js"></script> 
    <script type="text/javascript" src="../../js/jQuery-File-Upload-master/js/jquery.fileupload.js"></script> 
    <script type="text/javascript" src="../../js/jQuery-File-Upload-master/js/vendor/jquery.ui.widget.js"></script> 
    <script type="text/javascript" src="../../js/jQuery-File-Upload-master/js/jquery.iframe-transport.js"></script> 
    <script type="text/javascript"> 
     $('#fileupload').fileupload({ 
      dataType : 'json', 
      url : "ownmessages", 
      add: function (e, data) { 
       $('#post') .click(function() { 
        $('#post').text('Uploading...'); 
        data.submit(); 
       }); 
      }, 
      done: function (e, data) { 
       $('#post').text('Upload finished.'); 
      } 
     }); 
    </script> 
</head> 
<body> 
    <s:form action="ownmessages" enctype="multipart/form-data" method="post"> 
     <s:textarea rows="2" cols="40" name="message" id="message1"></s:textarea><br> 
     <s:select name="msg_visibility" id="msg_visibility" list="#{'public':'Public', 'friends':'Friends','me':'Me only'}" value="public"/> 
     <input id="fileupload" type="file" name="user_post_image[]" data-url="ownmessages"/> 
     <input type="button" value="Post" id="post" /> 
    </s:form> 
</body> 

回答

4

在嘗試並選擇任何元素之前,您需要等待文檔完成加載。 jQuery .ready()方法等待文檔對象模型(DOM)完成加載並運行腳本。

$(document).ready(function() { 
    $('#fileupload').fileupload({ 
     dataType : 'json', 
     url : "ownmessages", 
     add: function (e, data) { 
      $('#post') .click(function() { 
       $('#post').text('Uploading...'); 
       data.submit(); 
      }); 
     }, 
     done: function (e, data) { 
      $('#post').text('Upload finished.'); 
     } 
    }); 
}); 

而不是使用.ready()你也可以只通過一個函數的jQuery。

$(function() { 
    // will run after DOM is loaded 
}); 
+2

對於'jQuery.ready'的縮短版本。你甚至可以通過使用ready回調中的第一個參數來創建'$'的本地版本:''jQuery(function($){/ * in this $ $ $ $ $ $ $ $ $ $'$'$');' – andlrc 2013-02-09 12:25:24

+1

我增加了$ (document).ready(function(){但它仍然不起作用 – 2013-02-09 13:27:01

0

第一個問題:


<script type="text/javascript"> 
    $(document).ready(function() { 
    $('#fileupload').fileupload({ 
     dataType : 'json', 
     url : "ownmessages", 
     add: function (e, data) { 
      $('#post') .click(function() { 
       $('#post').text('Uploading...'); 
       data.submit(); 
      }); 
     }, 
     done: function (e, data) { 
      $('#post').text('Upload finished.'); 
     } 
    }); 
    }); 
</script> 

,這是一個開始,但可能還不夠......

下一個優化的緣故,至少,移動你的腳本標記到底部

+0

它不工作 – 2013-02-09 13:27:29

+1

很好的意見笑 – mikakun 2013-02-09 13:42:36

+0

如何解決這個:) – 2013-02-10 07:07:20