Here is my $.getJSON function (this is suppose to hit a .ashx file and return a json serialized object, which it does, i have tested it):
$.getJSON($('#fileupload form').prop('action'), function (files) {
var fu = $('#fileupload').data('fileupload');
alert("this is the files: " + files.toString);
fu._adjustMaxNumberOfFiles(-files.length);
fu._renderDownload(files)
.appendTo($('#fileupload .files'))
.fadeIn(function () {
// Fix for IE7 and lower:
$(this).show();
});
});
EDIT:
alert($('#fileupload form').prop('action')) < returns 'undefined'
somehow my js is being loaded before the markup so it probably cant find #fileupload on the page.
Here is the FULL markup:
<style type="text/css">
@import url('http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/base/jquery-ui.css');
@import url('/_layouts/IrvineCompany.SharePoint.CLM/css/jquery.fileupload-ui.css');
@import url('/_layouts/IrvineCompany.SharePoint.CLM/css/style.css');
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script type="text/javascript" src="/_开发者_StackOverflow中文版layouts/IrvineCompany.SharePoint.CLM/js/UploadFile/jquery.iframe-transport.js"></script>
<script type="text/javascript" src="/_layouts/IrvineCompany.SharePoint.CLM/js/UploadFile/jquery.fileupload.js"></script>
<script type="text/javascript" src="/_layouts/IrvineCompany.SharePoint.CLM/js/UploadFile/jquery.fileupload-ui.js"></script>
<script type="text/javascript" src="/_layouts/IrvineCompany.SharePoint.CLM/js/UploadFile/application.js"></script>
<div id="fileupload">
<form action="/_layouts/IrvineCompany.SharePoint.CLM/aspx/Upload.ashx" method="post" enctype="multipart/form-data">
<div class="fileupload-buttonbar">
<label class="fileinput-button">
<span>Add files...</span>
<input type="file" name="files[]" multiple="multiple" />
</label>
<%-- <button type="submit" class="start">Start upload</button>
<button type="reset" class="cancel">Cancel upload</button> --%>
<button type="button" class="delete">Delete all files</button>
<div class="fileupload-progressbar"></div>
</div>
</form>
<div class="fileupload-content">
<table class="files"></table>
</div>
</div>
<script id="template-upload" type="text/x-jquery-tmpl">
<tr class="template-upload{{if error}} ui-state-error{{/if}}">
<td class="preview"></td>
<td class="name">${name}</td>
<td class="size">${sizef}</td>
{{if error}}
<td class="error" colspan="2">Error:
{{if error === 'maxFileSize'}}File is too big
{{else error === 'minFileSize'}}File is too small
{{else error === 'acceptFileTypes'}}Filetype not allowed
{{else error === 'maxNumberOfFiles'}}Max number of files exceeded
{{else}}${error}
{{/if}}
</td>
{{else}}
<td class="progress"><div></div></td>
<td class="start"><button>Start</button></td>
{{/if}}
<td class="cancel"><button>Cancel</button></td>
</tr>
</script>
<script id="template-download" type="text/x-jquery-tmpl">
<tr class="template-download{{if error}} ui-state-error{{/if}}">
{{if error}}
<td></td>
<td class="name">${name}</td>
<td class="size">${sizef}</td>
<td class="error" colspan="2">Error:
{{if error === 1}}File exceeds upload_max_filesize (php.ini directive)
{{else error === 2}}File exceeds MAX_FILE_SIZE (HTML form directive)
{{else error === 3}}File was only partially uploaded
{{else error === 4}}No File was uploaded
{{else error === 5}}Missing a temporary folder
{{else error === 6}}Failed to write file to disk
{{else error === 7}}File upload stopped by extension
{{else error === 'maxFileSize'}}File is too big
{{else error === 'minFileSize'}}File is too small
{{else error === 'acceptFileTypes'}}Filetype not allowed
{{else error === 'maxNumberOfFiles'}}Max number of files exceeded
{{else error === 'uploadedBytes'}}Uploaded bytes exceed file size
{{else error === 'emptyResult'}}Empty file upload result
{{else}}${error}
{{/if}}
</td>
{{else}}
<td class="preview">
{{if thumbnail_url}}
<a href="${url}" target="_blank"><img src="${thumbnail_url}"></a>
{{/if}}
</td>
<td class="name">
<a href="${url}"{{if thumbnail_url}} target="_blank"{{/if}}>${name}</a>
</td>
<td class="size">${sizef}</td>
<td colspan="2"></td>
{{/if}}
<td class="delete">
<button data-type="${delete_type}" data-url="${delete_url}">Delete</button>
</td>
</tr>
</script>
EDIT:
Checked my markup, for some reason i have my form tag in there, but it disappears when i check the actual markup for the website.
Try using .attr
instead of .prop
$('#fileupload form').attr('action')
$.getJSON($('#fileupload form').attr("action"), function (files) {
var fu = $('#fileupload').data('fileupload');
alert("this is the files: " + files.toString);
fu._adjustMaxNumberOfFiles(-files.length);
fu._renderDownload(files)
.appendTo($('#fileupload .files'))
.fadeIn(function () {
// Fix for IE7 and lower:
$(this).show();
});
});
Make sure to wrap your javascript code in $(function(){..your code here..})
If you do you should get the correct result when you try to alert: http://jsfiddle.net/maniator/3MQ8W/
See that there are two alerts, the 1st being undefined
精彩评论