これは、アップロードを必要としない動的に変化するフォームで機能するようです。
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://mediahood.net/js/ajaxfileupload.js"></script>
<script>
$(document).ready(function(){
$("#txtrform").submit(function(){
$.post($(this).attr('action'), $(this).serialize(), function(data) {
$("#col3").load("/include/txtrpbox/feed.php");
$('input#txtrinput').val('');
});
return false;
});
});
</script>
しかし、これを追加すると、AJAX が失敗し、フォームが正常に送信されてページがリロードされます。
<script type="text/javascript" src="http://mediahood.net/js/ajaxfileupload.js"></script>
<script>
$(document).ready(function(){
$("#txtrform").submit(function(){
$.post($(this).attr('action'), $(this).serialize(), function(data) {
$("#col3").load("/include/txtrpbox/feed.php");
$('input#txtrinput').val('');
});
return false;
});
function ajaxFileUpload()
{
//starting setting some animation when the ajax starts and completes
$("#loading")
.ajaxStart(function(){
$(this).show();
})
.ajaxComplete(function(){
$(this).hide();
});
/*
prepareing ajax file upload
url: the url of script file handling the uploaded files
fileElementId: the file type of input element id and it will be the index of $_FILES Array()
dataType: it support json, xml
secureuri:use secure protocol
success: call back function when the ajax complete
error: callback function when the ajax failed
*/
$.ajaxFileUpload
(
{
url:$.post($(this).attr('action'),
secureuri:false,
fileElementId:'fileToUpload',
dataType: 'json',
success: function (data, status)
{
if(typeof(data.error) != 'undefined')
{
if(data.error != '')
{
alert(data.error);
}else
{
alert(data.msg);
}
}
},
error: function (data, status, e)
{
alert(e);
}
}
)
return false;
}
});
</script>
なんで?非アップロード フォームとアップロード フォームの両方が機能するようにしたいと思います。
http://www.phpletter.com/Our-Projects/AjaxFileUpload/のスクリプトを使用しています