cuelga YUI Subió después de la elección de archivo

Question

A continuación se muestra toda mi código de un control de usuario que contiene el YUI subida. Se me escapa algo. En este momento, cuando me paso a través del código JavaScript en Firebug, que cuelga en la primera línea de la función de carga (). Tengo un punto de interrupción en la primera línea de la ashx que maneja el archivo, pero nunca se llama. Por lo tanto, no llega tan lejos. Calculo que solo me falta algo estúpido. He usado este control muchas veces antes, sin problemas. Estoy usando todos los archivos CSS y gráficos proporcionados por las muestras de la carpeta en la descarga YUI.

Si no me falta nada, hay una manera más completa de este tema debuging luego a través de paso a paso por el código JavaScript con Firebug. He intentado girar el registro para YUI dentro y fuera, y nunca consigo cualquier registro en cualquier lugar. No estoy seguro de dónde ir ahora.

<style type="text/css">
   #divFile
   {
        background-color:White;
        border:2px inset Ivory;
        height:21px;
        margin-left:-2px;
        margin-right:9px;
        width:125px;
   }
</style>
<ajaxToolkit:RoundedCornersExtender runat="server" Corners="All" Radius="6" ID="rceContainer" TargetControlID="pnlMMAdmin" />
<asp:Panel ID="pnlMMAdmin" runat="server" 
 Width="100%" BackColor="Silver" ForeColor="#ffffff" Font-Bold="true" Font-Size="16px">
<div style="padding: 5px; text-align:center; width: 100%;">

<table style="width: 100% ; border: none; text-align: left;">
    <tr>
    <td style="width: 460px; vertical-align: top;">
        <!-- information panel -->
        <ajaxToolkit:RoundedCornersExtender runat="server" Corners="All" Radius="6" ID="RoundedCornersExtender1" TargetControlID="pnlInfo" />
        <asp:Panel ID="pnlInfo" runat="server" 
         Width="100%" BackColor="Silver" ForeColor="#ffffff" Font-Bold="true" Font-Size="16px">
        <div id="infoPanel" style="padding: 5px; text-align:left; width: 100%;">
        <table>
        <tr><td>Chart</td><td>
        <table><tr><td><div id="divFile" ></div></td><td><div id="uploaderContainer" style="width:60px; height:25px"></div></td></tr>
        <tr><td colspan="2"><div id="progressBar"></div></td></tr></table>
</td></tr>

    </table>

</div></asp:Panel>
<script type="text/javascript" language="javascript">
    WYSIWYG.attach('<%= txtComment.ClientID %>', full);
    var uploader = new YAHOO.widget.Uploader("uploaderContainer", "assets/buttonSkin.jpg");
    uploader.addListener('contentReady', handleContentReady);
    uploader.addListener('fileSelect', onFileSelect)
    uploader.addListener('uploadStart', onUploadStart);
    uploader.addListener('uploadProgress', onUploadProgress);
    uploader.addListener('uploadCancel', onUploadCancel);
    uploader.addListener('uploadComplete', onUploadComplete);
    uploader.addListener('uploadCompleteData', onUploadResponse);
    uploader.addListener('uploadError', onUploadError);
    function handleContentReady() {
        // Allows the uploader to send log messages to trace, as well as to YAHOO.log
        uploader.setAllowLogging(false);

        // Restrict selection to a single file (that's what it is by default,
        // just demonstrating how).
        uploader.setAllowMultipleFiles(false);

        // New set of file filters.
        var ff = new Array({ description: "Images", extensions: "*.jpg;*.png;*.gif" });

        // Apply new set of file filters to the uploader.
        uploader.setFileFilters(ff);
    }
    var fileID;
    function onFileSelect(event) {
        for (var item in event.fileList) {
            if (YAHOO.lang.hasOwnProperty(event.fileList, item)) {
                YAHOO.log(event.fileList[item].id);
                fileID = event.fileList[item].id;
            }
        }
        uploader.disable();

        var filename = document.getElementById("divFile");
        filename.innerHTML = event.fileList[fileID].name;

        var progressbar = document.getElementById("progressBar");
        progressbar.innerHTML = "Please wait... Starting upload.... ";
        upload(fileID);
    }
    function upload(idFile) {
        // file hangs right here. **************************
        progressBar.innerHTML = "Upload starting... ";
        if (idFile != null) {

            uploader.upload(idFile, "AdminFileUploader.ashx", "POST");
            fileID = null;
        }
    }
    function handleClearFiles() {
        uploader.clearFileList();
        uploader.enable();
        fileID = null;

        var filename = document.getElementById("divFile");
        filename.innerHTML = "";

        var progressbar = document.getElementById("progressBar");
        progressbar.innerHTML = "";
    }
    function onUploadProgress(event) {
        prog = Math.round(300 * (event["bytesLoaded"] / event["bytesTotal"]));
        progbar = "<div style=\"background-color: #f00; height: 5px; width: " + prog + "px\"/>";

        var progressbar = document.getElementById("progressBar");
        progressbar.innerHTML = progbar;
    }
    function onUploadComplete(event) {
        uploader.clearFileList();
        uploader.enable();

        progbar = "<div style=\"background-color: #f00; height: 5px; width: 300px\"/>";
        var progressbar = document.getElementById("progressBar");
        progressbar.innerHTML = progbar;
        alert('File Uploaded');
    }

    function onUploadStart(event) {
        alert('upload start');
    }

    function onUploadError(event) {
        alert('upload error');
    }

    function onUploadCancel(event) {
        alert('upload cancel');
    }

    function onUploadResponse(event) {
        alert('upload response');
    }

</script>

Answer 1

Parece que hay un desajuste caso en el nombre de la variable progressbar: se refieren a ella como progressbar en todas partes, sino como progressBar en la carga () la función

.

Un problema aún mayor es que se define la variable progressbar dentro de la función onFileSelect. Debido a eso, la variable tiene un alcance limitado y no debe estar en cualquier lugar accesible más.

A ver si se mueve la definición de progressbar salir de allí (o recién agarrándola del DOM todas partes se utiliza mediante el uso de getElemenById) y se fija el caso de falta de coincidencia resuelve sus problemas.

Answer 2

YUI 2.8 tiene problemas con los eventos y el cargador. No funcionará a menos que utilice 2,9 evento y cargador. No perdí más tiempo de lo que quería admitir tratando de obtener 2,8 al trabajo. Espero que esto ahorra a alguien ese momento.