通过调用 Web 服务从 JavaScript 上传文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4919952/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Uploading a file from JavaScript by calling a web service
提问by Zakaria
I have the following web service that allows me uploading files:
我有以下允许我上传文件的网络服务：
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// Pour autoriser l'appel de ce service Web depuis un script à l'aide d'ASP.NET AJAX, supprimez les marques de commentaire de la ligne suivante.
[System.Web.Script.Services.ScriptService]
public class Upload : System.Web.Services.WebService
{
[WebMethod]
public bool UploadFile(string PictureName, byte[] PictureStream)
{
FileStream fileStream = null;
BinaryWriter writer = null;
string filePath;
try
{
filePath = HttpContext.Current.Server.MapPath(".") + ConfigurationManager.AppSettings["PictureUploadDirectory"] + PictureName;
if (PictureName != string.Empty)
{
fileStream = File.Open(filePath, FileMode.Create);
writer = new BinaryWriter(fileStream);
writer.Write(PictureStream);
}
return true;
}
catch (Exception)
{
return false;
}
finally
{
if (fileStream != null)
fileStream.Close();
if (writer != null)
writer.Close();
}
}
}
It works great when it gets invoked from my Windows form.
当它从我的 Windows 窗体中调用时，它工作得很好。
Now, I'm trying to make it work with HTML/JavaScript. The index.htmlfile is put on the server side (to avoid the cross-domain error) and contains the following code:
现在，我试图让它与 HTML/JavaScript 一起工作。该index.html文件放在服务器端（避免跨域错误），包含以下代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/themes/base/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#btnSend").click(function () {
var fileStream = $("#fileToSend").val();
$.ajax({
type: "POST",
data: { PictureName: 'foobar', PictureStream: fileStream },
dataType: "image/gif",
url: "http://localhost/WebServices/Upload.asmx/UploadFile",
contentType: "application/x-www-form-urlencoded",
success: function () {
alert('yes');
},
error: function () {
alert('bouh');
}
});
});
});
</script>
</head>
<body>
<input type="file" id="fileToSend"/>
<br />
<input type="button" value="Envoyer" id="btnSend"/>
</body>
</html>
When I try to upload a file, I get the following response from the server:
当我尝试上传文件时，我从服务器收到以下响应：
System.ArgumentException: Unable to convert C:\fakepath\logo.gif into System.Byte.
How can I avoid this error?
我怎样才能避免这个错误？
Thanks, regards.
感谢和问候。
采纳答案by Mārti?? Briedis
You can't upload a file with Ajax. You can use an iframe which simulates a similiar effect, but you still have to sumbit the form. (by $("form").submit();or clicking the submit button)
您无法使用 Ajax 上传文件。您可以使用模拟类似效果的 iframe，但您仍然必须对表单进行 sumbit。（通过$("form").submit();或点击提交按钮）
回答by Herbert Smith
I dont know if this example will help you, but I got it working with jQuery 1.4 like this:
我不知道这个例子是否对你有帮助，但我让它在 jQuery 1.4 上工作，如下所示：
//JAVASCRIPT
var objFile = $jQuery("#fileToUpload");
var file = objFile[0].files[0];
API.call({
url : "rest-url/upload",
type : "POST",
contentType : "multipart/form-data",
data: file,
processData: false
});
//JAVA
@POST
@Consumes(MediaType.MULTIPART_FORM_DATA)
@Produces(MediaType.APPLICATION_JSON)
@Path("rest-url/upload")
public Response upload(InputStream fileInputStream) throws Exception {
//here you got your file
return Response.ok().entity(new Object("response")).build();
}
