我如何使用jQuery文件输入控制与我的asp.net web服务调用上传图片 [英] How do I upload an image using jquery file input control with my asp.net web service call
本文介绍了我如何使用jQuery文件输入控制与我的asp.net web服务调用上传图片的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想与其他数据到我的Web服务一起发送的图像，但我得到这个错误波纹管。
无法加载资源：服务器与500（内部服务器错误）的状态
回应我的Web服务调用工作没有两个客户端和Web方法的图像参数。我不知道在我的jQuery的方法上传图片的方式。
HTML
＆LT; ASP：按钮=服务器ID =btnUploadProject文本=上传工程的OnClick =btnUploadProject_Click的OnClientClick =返回false;的CssClass =btnUploadProject/＆GT;＆LT; DIV =服务器ID =dvProjects级=dvProjectAccordion dvAccordion＆GT;
＆LT; / DIV＆GT;＆LT; DIV ID =dvEditExhibition=服务器级=dvEditExhibition＆GT;
＆LT; DIV ID =内容＆GT;
＆LT;表＆gt;
＆LT;＆TBODY GT;
＆所述; TR＆GT;
＆LT; TD＆GT;名称：LT; / TD＆GT;
＆所述; TD＆GT;
＆LT;输入类型=文本ID =txtProjectName级=txtProjectName/＆GT;＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆LT; TD类=tdProjectDescription＆GT;简介：＆LT; / TD＆GT;
＆所述; TD＆GT;
＆LT; textarea的ID =txtProjectDescription级=txtProjectDescription＆GT;＆LT; / textarea的＆GT;＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆LT; TD＆GT;浏览：＆LT; / TD＆GT;
＆所述; TD＆GT;
＆LT;输入类型=文件ID =btnBrowse级=btnBrowseProjectImageVALUE =浏览/＆GT;＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; / TBODY＆GT;
＆LT; /表＆gt;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;的jQuery
函数AddUserProject（）{
VAR projectDialog = $（'。dvEditExhibition'）;
VAR PROJECTNAME = projectDialog.find（'。txtProjectName）VAL（）。
VAR projectDescription = projectDialog.find（'txtProjectDescription。'）VAL（）。
VAR projectImage = projectDialog.find（'。btnBrowseProjectImage）VAL（）。 VAR项目= JSON.stringify（{
专案编号：00000000-0000-0000-0000-000000000000
项目名称：项目名称，
projectDescription'：projectDescription，
projectImage'：projectImage
}）; $阿贾克斯（{
键入：POST，
URL：presentationService.asmx / AddUserProject
的contentType：应用/ JSON的;字符集= UTF-8，
数据类型：JSON
数据：项目，
成功：函数（响应）{
VAR数据= response.d;
的console.log（数据）;
VAR dvProjects = $（'。dvProjectAccordion'）;
dvProjects.append（数据）;
$（。dvAccordion），手风琴（刷新）。
}，
错误：功能（响应）{ }
}）;
}Web方法
[的WebMethod（EnableSession =真）]
公共字符串AddUserProject（字符串专案编号，串项目名，字符串projectDescription，字节[] projectImage）
{
用户userInSession = GetUserSession（）;
UserProject addedProject = NULL;
如果（空== portfolioService）
{
portfolioService =新PortfolioService（）;
}
addedProject = portfolioService.AddUserProject（userInSession.UserID，专案编号，项目名称，
项目介绍）;
如果（NULL！= addedProject）
{
userInSession.Projects.Add（addedProject）;
}
字符串returnedControl = CreateProjectControl（addedProject）;
返回returnedControl;
}
解决方案HTML
＆LT;表ID =uploadForm＆GT;
＆LT;标签＆gt;上传图片文件：LT; /标签＆gt;＆LT; BR /＆GT;
＆LT;输入名称=形象类型=文件/＆GT;
＆LT;输入类型=提交值=提交/＆GT;
＆LT; /表及GT;JavaScript的
$（文件）。就绪（函数（五）{
$（＃uploadForm）。在（'提交'，（函数（五）{
亦即preventDefault（）;
$阿贾克斯（{
网址：网址，
键入：POST，
数据：新FORMDATA（本），
的contentType：假的，
缓存：假的，
过程数据：假的，
成功：功能（数据）{ }
}）;
}））;
}）;更新
在做这个
VAR projectImage = projectDialog.find（'btnBrowseProjectImage。'）VAL（）;插上U形象的名字，而不是原始图像本身除了确保u有在web.config中那些ECONFIG
＆LT;＆Web服务GT;
＆LT;＆协议GT;
＆LT;添加名称=HTTPGET/＆GT;
＆LT;添加名称=HttpPost/＆GT;
＆LT; /协议＆GT;
＆LT; / WebServices的＆GT;I am trying to send an image along with other data to my web service but i get this error bellow.
Failed to load resource: the server responded with a status of 500 (Internal Server Error)
My web service call works without the image parameter on both client side and web method. I don't know the way to upload images in my jQuery method.
HTML
<asp:Button runat="server" ID="btnUploadProject" Text="Upload Project" OnClick="btnUploadProject_Click" OnClientClick="return false;" CssClass="btnUploadProject" /> <div runat="server" id="dvProjects" class="dvProjectAccordion dvAccordion"> </div> <div id="dvEditExhibition" runat="server" class="dvEditExhibition"> <div id="content"> <table> <tbody> <tr> <td>Name:</td> <td> <input type="text" id="txtProjectName" class="txtProjectName" /></td> </tr> <tr> <td class="tdProjectDescription">Description:</td> <td> <textarea id="txtProjectDescription" class="txtProjectDescription"></textarea></td> </tr> <tr> <td>Browse:</td> <td> <input type="file" id="btnBrowse" class="btnBrowseProjectImage" value="Browse" /></td> </tr> </tbody> </table> </div> </div>jQuery
function AddUserProject() { var projectDialog = $('.dvEditExhibition'); var projectName = projectDialog.find('.txtProjectName').val(); var projectDescription = projectDialog.find('.txtProjectDescription').val(); var projectImage = projectDialog.find('.btnBrowseProjectImage').val(); var project= JSON.stringify({ 'projectId': "00000000-0000-0000-0000-000000000000", 'projectName': projectName, 'projectDescription': projectDescription, 'projectImage' : projectImage }); $.ajax({ type: "POST", url: "PresentationService.asmx/AddUserProject", contentType: "application/json; charset=utf-8", dataType: "json", data: project, success: function (response) { var data = response.d; console.log(data); var dvProjects = $('.dvProjectAccordion'); dvProjects.append(data); $(".dvAccordion").accordion("refresh"); }, error: function(response) { } }); }Web Method
[WebMethod(EnableSession = true)] public string AddUserProject(string projectId, string projectName, string projectDescription, byte[] projectImage) { User userInSession = GetUserSession(); UserProject addedProject = null; if (null == portfolioService) { portfolioService = new PortfolioService(); } addedProject = portfolioService.AddUserProject(userInSession.UserID, projectId, projectName, projectDescription); if (null != addedProject) { userInSession.Projects.Add(addedProject); } string returnedControl = CreateProjectControl(addedProject); return returnedControl; }
解决方案html
<form id="uploadForm"> <label>Upload Image File:</label><br/> <input name="image" type="file" /> <input type="submit" value="Submit" /> </form>javascript
$(document).ready(function (e) { $("#uploadForm").on('submit',(function(e) { e.preventDefault(); $.ajax({ url: url, type: "POST", data: new FormData(this), contentType: false, cache: false, processData:false, success: function(data){ } }); })); });update
with the doing this
var projectImage = projectDialog.find('.btnBrowseProjectImage').val();gives u image name ,not the original image itselfbesides be sure that u have those econfig in web.config
<webServices> <protocols> <add name="HttpGet"/> <add name="HttpPost"/> </protocols> </webServices>
这篇关于我如何使用jQuery文件输入控制与我的asp.net web服务调用上传图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
