jquery上传图片,在线等，急急

Question

这个怎么实现？

Answer 1

找一个ajax上传组件，回调函数中获得图片路径，添加到下面的列表就行了
如果像自己做
参考：
http://blog.csdn.net/wzs_xyz/article/details/9763861

Answer 2

用提交隐藏iframe 就行了，或者用flash

Answer 3

http://blueimp.github.io/jQuery-File-Upload/

Answer 4

uploadify 插件 很容易使用的

Answer 5

各种插件，我用过的uploadify，挺容易的

Answer 6

<tr>
            <td class="style3" style="vertical-align: text-top">
                公司LOGO
            </td>
            <td class="style4">
                <asp:FileUpload name="doc" ID="doc" runat="server" onchange="setImagePreview()" />
                <asp:Button ID="file" runat="server" Text="上传图片" OnClick="file_Click" />
            </td>
        </tr>
        <tr>
            <td colspan="2" style="padding-left: 40px;">
                <div id="localImag">
                    <asp:Image runat="server" ID="ImgLogoUrl" Height="130px" Width="215px" />
                    <asp:Label ID="lblCheck" runat="server" Text=""></asp:Label>
                </div>
                <img src="" id="imgs" alt="" style="height: 130px; width: 215px; display:none" />
            </td>
        </tr>var path = '<%=this.path %>';        function setImagePreview() {
            document.getElementById("ImgLogoUrl").style.display = 'block';
            document.getElementById("imgs").style.display = 'none';
            document.getElementById("lblCheck").style.display = 'none';
            var docObj = document.getElementById("doc");
            var imgObjPreview = document.getElementById("ImgLogoUrl");
            if (docObj.files && docObj.files[0]) {
                //火狐下，直接设img属性
                imgObjPreview.style.display = 'block';
                imgObjPreview.style.width = '300px';
                imgObjPreview.style.height = '120px';
                //imgObjPreview.src = docObj.files[0].getAsDataURL();
                //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式  
                imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
            } else {
                //IE下，使用滤镜
                docObj.select();
                var localImagId = document.getElementById("ImgLogoUrl");
                var imgSrc = document.selection.createRange().text;
                //必须设置初始大小
                localImagId.style.width = "215px";
                localImagId.style.height = "120px";
                //图片异常的捕捉，防止用户修改后缀来伪造图片
                try {
                    localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                    localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
                } catch (e) {
                    alert("您上传的图片格式不正确，请重新选择!");
                    return false;
                }
            }
            document.selection.empty();
            document.getElementById("file").disabled = false;
            return true;
        }        function RemoveFile() {
            var e = document.getElementById("ImgLogoUrl");
            e.outerHTML = e.outerHTML;
            e.style.display = "none";
        }        $(function () {
            parent.$.messager.progress('close');
            LoadList();
        });        function LoadList() {
            $.ajax({
                type: "GET",
                dataType: "json",
                url: "",
                data: { "ID": $("#txt_ID").val() },
                cache: false,  //不使用缓存
                success: function (data) {
                    if (!data.Success) {
                        parent.$.messager.alert('提示', data.Message);
                        return false;
                    }
                    else {
                        var input_query = $("input[id^='txt_']");
                        $.each(input_query, function (k, v) {
                            var attr = v.id.substring(4);
                            $("#" + v.id).val(data.rows[attr]);
                        });
                        if (path == "") {
                            var url = "../Image/" + data.rows["LogPath"].toString();
                            document.getElementById("imgs").style.display = 'block';
                            document.getElementById("ImgLogoUrl").style.display = 'none';
                            document.getElementById("imgs").src = url;
                        }
                    }
                }
            });
        }        var CName;
        function SaveInfo() {
            json();
            $.ajax({
                type: "POST",
                dataType: "json",
                url: "/Ashx/AjaxHandler.ashx?cName=ComInfoPortal&mName=UpdateDate",
                data: { "Obj": getJson },
                success: function (data) {
                    if (data.Success) {
                        document.getElementById("lblCheck").style.display = 'none';
                        document.getElementById("imgs").style.display = 'none';
                        parent.$.messager.progress('close');
                    } else {
                        parent.$.messager.alert('提示', data.Message);
                        return false;
                    }
                },
                beforeSend: function (data) {//解决重复点击保存的问题
                    parent.$.messager.progress({
                        title: '提示',
                        text: '数据处理中，请稍后....'
                    });
                }
            });
        }        var getJson;
        function json() {
            var data = {  "URL": "","LogPath": ""};
            var input_query = $("input[id^='txt_']");
            $.each(input_query, function (k, v) {
                var attr = v.id.substring(4);
                data[attr] = $("#" + v.id).val();
            });
            data["LogPath"] = path;
            var json = JSON.stringify(data, function (k, v) { return v === "" ? "" : v });
            var obj = {
                Enterprise: json
            };
            getJson = JSON.stringify(obj, function (k, v) { return v === "" ? "" : v });
        }protected void file_Click(object sender, EventArgs e)
        {
            string txtLogoName = Guid.NewGuid().ToString();
            string prefix = Path.GetExtension(doc.FileName);
            if (prefix != "")
            {
                if (prefix == ".jpg" || prefix == ".gif" || prefix == ".png" || prefix == ".bmp")
                {
                    try
                    {
                        //获取上传文件的后缀名        
                        //string prefix = doc.FileName.Substring(doc.FileName.LastIndexOf("."));                        //设置上传文件的名称        
                        string filename = DateTime.Now.ToString("yyyyMMddhhmmssms") + prefix;
                        //设置上传的路径        
                        string filepath = Server.MapPath("~/Image") + "/" + filename;
                        path = Request[""] + filename;
                        //上传文件        
                        doc.SaveAs(filepath);
                        ImgLogoUrl.ImageUrl = "~/Image/" + filename;
                        //ImgLogoUrl.ImageUrl = filepath;
                        lblCheck.Text = "<img src='../Image/validate_success.gif' />上传成功";
                        return;
                    }
                    catch
                    {
                        lblCheck.Text = "<img src='../Image/validate_error.gif' />上传失败";
                    }
                }
                else
                {
                    lblCheck.Text = "<img src='../Image/validate_error.gif' />图片格式无效";
                }
            }
            else {
                lblCheck.Text = "<img src='../Image/validate_error.gif' />请选择图片";
            }
        }有点小多哈...