Can't get jquery file uploader to appear on pa

2019-09-06 18:11发布

问题:

Okay, I am about to pull my hair out here. I've been trying two different file uploader libraries, Blueimp's jQuery file uploader and Valums file uploader. I can't get an upload button to appear on my page with either of them. I am trying to put it inside of a form within a jQuery accordion div. I must have some problem with my code that's preventing it from showing up in my target div, but I get nothing whatsoever as far as errors in the console. Just nothing shows up. Any ideas? Here's the Blueimp version of my code:

HTML:

<div id="photo" class="additionsDiv"><br />
                    URL: 
                        <input type="text" name="photourl" size="40"></input>
                        or 
                        <div id="photoUpload">
                            <noscript>
                            <input name="photoUpload" type="file" size="0" /></input>
                            </noscript>
                        </div>
                </div>

Javascript:

function addUploaders() {
$('#photoUpload').fileupload();

};

Linked files included:

<link type="text/css" href="libraries/blueimp/css/jquery.fileupload-ui.css" rel="stylesheet" />
    <script type="text/javascript" src="libraries/blueimp/js/jquery.fileupload.js"></script>
    <script type="text/javascript" src="libraries/blueimp/js/jquery.fileupload-fp.js"></script>
    <script type="text/javascript" src="libraries/blueimp/js/jquery.fileupload-ui.js"></script>
    <script type="text/javascript" src="libraries/blueimp/js/main.js"></script>

回答1:

if you are customizing the interface you should check out this link on setting minimalistic interface with custom upload progress bar . . . .

The plugin adds custom spans with custom classes to display selected files and prepare them for upload . . . .

for eg . . check this source of blueimp demo

 <!-- The table listing the files available for upload/download -->
    <table role="presentation" class="table table-striped"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody></table>

I suggest you to check out the documentation which is very detailed . . .