zoukankan      html  css  js  c++  java
  • ajax无刷新上传文件

    1. <script src="@Url.Content("~/Scripts/ajaxfileupload.js")" type="text/javascript"></script>
        <link href="@Url.Content("~/Content/css/jquery.Jcrop.css")" rel="stylesheet" type="text/css" />
        <script src="@Url.Content("~/Scripts/jquery.Jcrop.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/JS/ImageSet.js")" type="text/javascript"></script>

    2.  <input type="hidden" name="hdnImageKey"  id="hdnImageKey" />

             <tr>
                                <td class="td-right">
                                    新闻图片:
                                </td>
                                <td class="td-left">
                                 <span id="imgNewsSpan">
                                    </span>
                                    <input type="button" id="uploadImage" class="button" value="上传图片" />
                                    <input type="button" id="delImage" class="button" value="删除图片" style="display:none;" />
                                </td>
                            </tr>

    <div id="uploadDiv" class="dialog">
    </div>

     <div id="uploadImg">
            选择图片:<input type="file" id="fileImg" name="fileImg" /><br />
            仅支持JPG、JPEG、PNG、GIF格式(2M以下)
        </div>

     3.ImageSet.js

    //绑定上传控件
        $("#fileImg").live("change", function () {
            var myfile = $("#fileImg").val();
            if (myfile == "") {
                alert("请选择要上传的图片");
                return;
            }
            $("#uploadImg").hide();
            $("#uploadingDiv").show();
            $.ajaxFileUpload({
                url: '/ImageSet/UploadImg', //提交处理的页面
                secureuri: false,
                fileElementId: 'fileImg', //上传控件的id
                name: myfile,
                dataType: 'text/html', //数据格式
                success: function (result, status) {
                    var data = eval("(" + result + ")");
                    var msg = data.msg;
                    if (data.result == "0") {
                        alert(msg);
                    }
                    else {
                        var src = "/Content/TempImages/" + msg;
                        $("#targetSpan").empty().append('<img id="target" width="450px" height="450px"   alt="" />');
                        $("#previewSpan").empty().append('<img width="150" height="150" id="preview"  alt="" />');
                        $("#target").attr("src", src).load(function () {
                            $("#uploadingDiv").hide();
                            $("#setImg").slideDown("fast", function () {
                                //绑定切割图片
                                jQuery('#target').Jcrop({
                                    onChange: showPreview,
                                    onSelect: showPreview,
                                    aspectRatio: 1,
                                    minSize: [150, 150]
                                }, function () {
                                    // Use the API to get the real image size
                                    var bounds = this.getBounds();
                                    boundx = bounds[0];
                                    boundy = bounds[1];
                                    this.setSelect([300, 300, 150, 150]);
                                    //Store the API in the jcrop_api variable
                                    jcrop_api = this;
                                });
                            });
                        });
                        $("#preview").attr("src", src);
                        $("#targetURL").val(src);


                    }

                }, error: function (result, status, e) {
                    $("#uploadImg").show();
                    $("#uploadingDiv").hide();
                    alert("上传失败!");
                }
            });
            return false;
        });

    ajaxfileupload.js

     

    // JavaScript Document
    jQuery.extend({

        createUploadIframe: function (id, uri) {
            //create frame
            var frameId = 'jUploadFrame' + id;

            if (window.ActiveXObject) {

                var io = document.createElement("iframe"); // document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />');
                io.setAttribute("id", frameId);
                io.setAttribute("name", frameId);
                if (typeof uri == 'boolean') {
                   // io.src = 'javascript:false';
                    io.setAttribute("src", "javascript:false");
                }
                else if (typeof uri == 'string') {
                    //io.src = uri;
                    io.setAttribute("src", uri);
                }
            }
            else {
                var io = document.createElement('iframe');
                io.setAttribute("id", frameId);
                io.setAttribute("name", frameId);
    //            io.id = frameId;
    //            io.name = frameId;
            }
    //        io.style.position = 'absolute';
    //        io.style.top = '-1000px';
    //        io.style.left = '-1000px';
            io.setAttribute("style", "position:absolute;top:-1000px;left:-1000px;");
            document.body.appendChild(io);

            return io;
        },
        createUploadForm: function (id, fileElementId) {
            //create form
            var formId = 'jUploadForm' + id;
            var fileId = 'jUploadFile' + id;
            var form = jQuery('<form  action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');
            var oldElement = jQuery('#' + fileElementId);
            var newElement = jQuery(oldElement).clone();
            jQuery(oldElement).attr('id', fileId);
            jQuery(oldElement).before(newElement);
            jQuery(oldElement).appendTo(form);
            //set attributes
            jQuery(form).css('position', 'absolute');
            jQuery(form).css('top', '-1200px');
            jQuery(form).css('left', '-1200px');
            jQuery(form).appendTo('body');
            return form;
        },

        ajaxFileUpload: function (s) {
            // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout 
            s = jQuery.extend({}, jQuery.ajaxSettings, s);
            var id = s.fileElementId;
            var form = jQuery.createUploadForm(id, s.fileElementId);
            var io = jQuery.createUploadIframe(id, s.secureuri);
            var frameId = 'jUploadFrame' + id;
            var formId = 'jUploadForm' + id;

            if (s.global && !jQuery.active++) {
                // Watch for a new set of requests
                jQuery.event.trigger("ajaxStart");
            }
            var requestDone = false;
            // Create the request object
            var xml = {};
            if (s.global) {
                jQuery.event.trigger("ajaxSend", [xml, s]);
            }

            var uploadCallback = function (isTimeout) {
                // Wait for a response to come back
                var io = document.getElementById(frameId);
                try {
                    if (io.contentWindow) {
                        xml.responseText = io.contentWindow.document.body ? io.contentWindow.document.body.innerHTML : null;
                        xml.responseXML = io.contentWindow.document.XMLDocument ? io.contentWindow.document.XMLDocument : io.contentWindow.document;

                    } else if (io.contentDocument) {
                        xml.responseText = io.contentDocument.document.body ? io.contentDocument.document.body.innerHTML : null;
                        xml.responseXML = io.contentDocument.document.XMLDocument ? io.contentDocument.document.XMLDocument : io.contentDocument.document;
                    }
                } catch (e) {
                    jQuery.handleError(s, xml, null, e);
                }
                if (xml || isTimeout == "timeout") {
                    requestDone = true;
                    var status;
                    try {
                        status = isTimeout != "timeout" ? "success" : "error";
                        // Make sure that the request was successful or notmodified
                        if (status != "error") {
                            // process the data (runs the xml through httpData regardless of callback)
                            var data = jQuery.uploadHttpData(xml, s.dataType);
                            if (s.success) {
                                // ifa local callback was specified, fire it and pass it the data
                                s.success(data, status);
                            };
                            if (s.global) {
                                // Fire the global callback
                                jQuery.event.trigger("ajaxSuccess", [xml, s]);
                            };
                        } else {
                            jQuery.handleError(s, xml, status);
                        }

                    } catch (e) {
                        status = "error";
                        jQuery.handleError(s, xml, status, e);
                    };
                    if (s.global) {
                        // The request was completed
                        jQuery.event.trigger("ajaxComplete", [xml, s]);
                    };


                    // Handle the global AJAX counter
                    if (s.global && ! --jQuery.active) {
                        jQuery.event.trigger("ajaxStop");
                    };
                    if (s.complete) {
                        s.complete(xml, status);
                    };

                    jQuery(io).unbind();

                    setTimeout(function () {
                        try {
                            jQuery(io).remove();
                            jQuery(form).remove();

                        } catch (e) {
                            jQuery.handleError(s, xml, null, e);
                        }

                    }, 100);

                    xml = null;

                };
            }
            // Timeout checker
            if (s.timeout > 0) {
                setTimeout(function () {

                    if (!requestDone) {
                        // Check to see ifthe request is still happening
                        uploadCallback("timeout");
                    }

                }, s.timeout);
            }
            try {
                var form = jQuery('#' + formId);
                jQuery(form).attr('action', s.url);
                jQuery(form).attr('method', 'POST');
                jQuery(form).attr('target', frameId);
                if (form.encoding) {
                    form.encoding = 'multipart/form-data';
                }
                else {
                    form.enctype = 'multipart/form-data';
                }
                jQuery(form).submit();

            } catch (e) {
                jQuery.handleError(s, xml, null, e);
            }
            if (window.attachEvent) {
                document.getElementById(frameId).attachEvent('onload', uploadCallback);
            }
            else {
                document.getElementById(frameId).addEventListener('load', uploadCallback, false);
            }
            return { abort: function () { } };

        },

        uploadHttpData: function (r, type) {
            var data = !type;
            data = type == "xml" || data ? r.responseXML : r.responseText;
            // ifthe type is "script", eval it in global context
            if (type == "script") {
                jQuery.globalEval(data);
            }

            // Get the JavaScript object, ifJSON is used.
            if (type == "json") {
                eval("data = " + data);
            }

            // evaluate scripts within html
            if (type == "html") {
                jQuery("<div>").html(data).evalScripts();
            }

            return data;
        }
    });

     

  • 相关阅读:
    多选择文件打开对话框
    DirectoryExists
    获取IP地址
    获取WINDOWS特殊文件夹
    WPF WebBrowser
    DELPHI TDownLoadURL下载网络文件
    同步窗体移动 FormMove
    FireMonkey 使用Webbrowser
    网页截取图片
    FormMove
  • 原文地址:https://www.cnblogs.com/yxlblogs/p/3043936.html
Copyright © 2011-2022 走看看