Über die Verwendung von Ajaxfileupload und einige Fragen-js-Tutorial-php.cn

Über die Verwendung von Ajaxfileupload und einige Fragen

高洛峰

Freigeben： 2016-12-12 17:51:05

Original

1486 Leute haben es durchsucht

Verwendungsprobleme:

1.ajax-fileupload.js handleError-Ausnahme Ursprünglich war die handleError-Methode eine JQuery-Methode, aber als JQuery eine bestimmte Version erreichte, wurde diese Methode entfernt >Der einfachste und effektivste Weg besteht darin, diese Methode in ajaxfileupload.js hinzuzufügen. Die Methode lautet wie folgt:

2. Dateidomäne Binden Sie das Änderungsereignis, um das Bild jedes Mal auf den Server hochzuladen Sie wählen es aus und geben den Bildpfad zurück, lassen den Browser das Bild anzeigen, aber nach dem Auslösen eines Änderungsereignisses wird das Änderungsereignis beim nächsten Mal nicht ausgelöst

handleError: function (s, xhr, status, e) {
        // If a local callback was specified, fire it  
        if (s.error) {
            s.error.call(s.context || s, xhr, status, e);
        }
 
        // Fire the global callback  
        if (s.global) {
            (s.context ? jQuery(s.context) : jQuery.event).trigger("ajaxError", [xhr, s, e]);
        }
    },

Nach dem Login kopieren

Grund: Weil ajaxFileUpload das ursprüngliche Dateielement durch a ersetzt Neues Dateielement, das zuvor gebundene Änderungsereignis ist ungültig. Lösung: Binden Sie das Änderungsereignis in der Rückruffunktion in $.ajaxFileUpload({option}) erneut.

Demo verwenden

Seite anzeigen:

Controller: Da das Front-End die Rückgabe von Daten im JSON-Format erfordert, müssen Daten im JSON-Format hier zurückgegeben werden. aber ajaxFileUpload, die erforderlichen JSON-Daten sind eine Zeichenfolge, daher kann Json() hier nicht verwendet werden. Sie müssen die Methode in Newtonsoft.Json verwenden, um sie in eine Zeichenfolge im JSON-Format zu serialisieren >

//绑定事件
     $("#文件上传域的ID").change(function () {
            UploadImg();
            });
 
    UploadImg = function() {    //判断内容是否为空
        if ($("#文件上传域的ID").val().length <= 0) {            return;
        };        //执行异步上传        $.ajaxFileUpload({
            url: &#39;@Url.Action("UploadHeadPhoto","UserInfo")&#39;, //用于文件上传的服务器端请求地址
            type: &#39;post&#39;,
            data: { id: $("#userId").val() },//自定义参数
            secureuri: false, //是否需要安全协议，一般设置为false
            fileElementId: &#39;文件上传域的ID&#39;, //文件上传域的ID
            dataType: &#39;json&#39;, //返回值类型 一般设置为json
            success: function(data) //服务器成功响应处理函数            {                //由于ajaxFileUpload把原来的file元素替换成新的file元素，所以之前绑定的change事件就失效了，需要重新绑定一下
                $("#文件上传域的ID").change(function () {
                    UploadImg();
                });        //Do something....            }
        });
    };

Nach dem Login kopieren