Upload images with jQuery modal dialog sample

问题:

Does anyone know any projects/demo etc that could show me the following,

clicking on an "Upload image" link on the page and a jQuery modal dialog shows up with a form that lets the user uploads an image from the computer or specify a link to an image on web. Then the image is ajax uploaded and it shows up a thumbnail on the modal dialog, after that the user clicks the image the modal dialog disappears and the according html snippet is inserted to an textarea (I'm using TinyMce here).

This pretty much is what WordPress does, but WordPress is too complex to learn from. Does anyone know an easier sample, preferably an ASP.NET MVC app, or could someone point me to what needs to be done please?

回答1:

To start with you can use the uploadify plugin: http://www.uploadify.com/

You have some events when the file is uploaded. Implement these event and do the job here.

Hope this helps

回答2:

Okay, this is going to be a long one. As has been mentioned - you cannot directly upload via AJAX, but you sure can fake the behaviour by posting to a hidden iFrame.

For the purposes of this demo I'd go with the jQuery blockUI plugin for the modal ... the file upload component doesn't really matter. The basic process is:

1. Pop up the modal and present the regular upload dialog
2. Target the hidden iFrame with the form post. Disable the ability to close the modal.
3. When the upload is complete (so at the end of the script) reurn a tag that calls a function in the parent frame.
4. The function in the parent frame takes the URL of the new image and performs an .append() to the body of the modal and re-enables the ability to close the modal.

Though this isn't a complete app - it should give you the foundation you need. If you need something 100% ... well that'd take me more time than I have at this moment since I'm just adapting some of my existing code to your qustion.

The message portion of the modal (includes the iFrame):

<div id="UploadDrivers">
  <a href="#" onclick="$('#UploadForm').toggle();return false;" title="Upload New Image">
  <img src="/upload.gif" title="Upload New Image" />Upload New Image</a>
    <div id="UploadForm" style="display:none;text-align:right;">
      <form method="post" enctype="multipart/form-data" style="display:inline;"
         action="/uploadLogic.aspx" target="FileUpload"
         onsubmit="$('#UploadDrivers').hide(); $('#UploadStatus').show();">
           <input type="hidden" name="CALLBACK" value="uploadCallback" />
           <input type="file" name="FILE_NAME" />
           <input type="submit" value="Upload Image"  
             onclick="return $('input[name=FILE_NAME]', '#UploadForm').val() != '';"/>
        </form>
      </div>
      <iframe id="FileUpload" name="FileUpload" src="javascript:false;" style="width:1px;height:1px;border:none;"></iframe>
    </div>
    <div style="text-align:center;display:none;" id="UploadStatus">
      Uploading file.... <img src="busy.gif" title="Uploading..." />
    </div>
</div>

Your upload page (uploadLogic.aspx in this case):

\\Whatever logic you need for your situation to upload a file goes here
script language="javascript" type="text/javascript">
    function init(){
        var bError = ; //boolean from the upload
        var fileGuid = ""; //guid of file on server
        var msg = ""; //message to display on callback
        var fileName = "" //for friendly display of original name
        if(top.) {
            top.(bError, guid, filename, msg) 
            //callback function passed to this page to allow it to be more 'universal'
        }
    }
/script>

Last but not least ... the main page has a link to show the modal and a function like

  function uploadCallback(error, guid, filename, message) {
    if(error) { alert("There was an error uploading the file:\r\n\r\n" + message); return; }
    $("#UploadDrivers").append(");
    //do whatever else
    }

...those are the important bits - you may want to do something with file extension, or cooler UI stuff, but those are the basics of how it can be done with JS.

回答3:

cannot upload image through ajax. Use Iframe in the popup div

回答4:

You need to use flash to do this. This doesn't mean you need to learn flash.

Use a component like Uploadify or SwfUpload (uploadify is built on SwfUpload).

NB: Flash has some quirky issues when it comes to HTTP Status codes. I've got it (and a related weird CURL bug) covered on my site.

While at it, be sure you know what you're doing. Upload systems can easily screw up, causing large gaping security holes in your server. Trust me, I've been through (securely implementing) it, and it's one of the hardest parts when it comes to security.