我可以使用以下jQuery代码使用Ajax请求的post方法执行文件上载吗？
$.ajax({
type: "POST",
timeout: 50000,
url: url,
data: dataString,
success: function (data) {
alert('success');
return false;
}
});
如果可能,我是否需要填写"数据"部分？这是正确的方法吗？我只将文件发布到服务器端.
我一直在谷歌搜索,但我发现是一个插件,而在我的计划中,我不想使用它.至少目前.
我发现了一些不同的帖子,甚至还有关于stackoverflow回答这个问题的问题.我基本上和这篇文章一样实现了同样的东西.
所以这是我的问题.当我上传照片时,我还需要提交表单的其余部分.这是我的HTML:
<form id="uploadImageForm" enctype="multipart/form-data">
<input name="imagefile[]" type="file" id="takePictureField" accept="image/*" onchange="uploadPhotos(\'#{imageUploadUrl}\')" />
<input id="name" value="#{name}" />
... a few more inputs ...
</form>
以前,我不需要调整图像大小,所以我的javascript看起来像这样:
window.uploadPhotos = function(url){
var data = new FormData($("form[id*='uploadImageForm']")[0]);
$.ajax({
url: url,
data: data,
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: function(data){
... handle error...
}
}
});
};
这一切都很有效...现在我需要调整图像的大小......如何替换表单中的图像以便调整已调整大小的图像而不是上传的图像？
window.uploadPhotos = function(url){
var resizedImage;
// Read in file
var file = event.target.files[0];
// Ensure it's an image
if(file.type.match(/image.*/)) {
console.log('An image has …我想用HTML5 Canvas调整从客户端iOS相机拍摄的图像的大小,但是我继续在这个奇怪的错误中运行,如果大于〜1.5mb,图像的比例错误
它适用于桌面,但不适用于带有媒体上传API的最新iOS版本.
你可以在这里看到一个例子:http://jsbin.com/ekuros/1
知道怎么解决这个问题吗？这是内存问题吗？
$('#file').on('change', function (e) {
var file = e.currentTarget.files[0];
var reader = new FileReader();
reader.onload = function (e) {
var image = $('<img/>');
image.on('load', function () {
var square = 320;
var canvas = document.createElement('canvas');
canvas.width = square;
canvas.height = square;
var context = canvas.getContext('2d');
context.clearRect(0, 0, square, square);
var imageWidth;
var imageHeight;
var offsetX = 0;
var offsetY = 0;
if (this.width > this.height) {
imageWidth = Math.round(square * this.width / this.height); …我知道有多种方法可以将多个图像从浏览器上传到服务器,并且上传速度也取决于服务器和网络的速度.这样做的标准方法:
单击网站上的上传按钮 - >选择要上传的图像 - >单击"提交"按钮将所有图像上传到服务器(提示"请稍候"给用户) - >上传成功!
但就编码部分而言,我只是想知道是否有更快的方法可以有效地将图像从客户端设备上传到服务器？(使用Javascript和php)
目前我正在做的是首先在客户端"剪下"图像,然后将图像发送回服务器.但这很慢,因为javascript需要时间来"减少"图像的大小.通过"减少",我的意思是使图像的宽度和高度更小.有更快的方法吗？
(一些javascript和php编码示例也会有所帮助.)
这是我现在用来使用HTML5 File API上传多个图像的代码片段:
/**
* @param {FileList} files
*/
upload: function(files){
nfiles = files.length;
for (var i = 0; i < nfiles; i++) {
/** @var file File **/
var file = files[i];
var xhr = new XMLHttpRequest();
xhr.open("POST", settings.post_upload, true);
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
xhr.upload.filenumb = i;
xhr.filenumb = i;
xhr.upload.filename = file.name;
var nef = new FormData();
nef.append("folder", settings.folder);
nef.append("file_element", settings.file_elem);
nef.append("udata", settings.user_data);
nef.append(settings.file_elem, file);
xhr.send(nef);
}
}
我想在使用canvas对象上传之前调整图像大小,但没有相关经验,我不知道如何使用技术更新代码,例如下面描述的那些:HTML5在上传之前预先调整图像大小
canvas.toDataURL("image/png");将返回一个编码的字符串.但是我需要发布这个File对象.
如何(合理地)为大多数现代浏览器编写跨浏览器功能,以便在上传之前调整文件大小,处理具有透明度的jpg,png和gif: …
正如标题所说.要求是能够在将裁剪后的图像上传到服务器之前裁剪图像.所有工作都应该在客户端完成.我听说过在服务器上裁剪图像并完全保存的方法.
但是因为我使用Parse.com服务.服务器端不支持图像处理,因此我需要在本地处理它并将完成的图像直接上传到Parse.com服务.
示例代码非常有用.谢谢.
如何通过手机设置从手机上传的照片的最大分辨率或最大尺寸<input type=file capture=camera>？
我想用鼠标移动网络中的图像并调整其大小。
所以我尝试用 Jquery 做到这一点。
jQuery 的可拖动效果很好，但可调整大小不起作用。
我的代码有什么问题？
你能推荐除jquery之外的其他方法吗？
<script>
$( function() {
$( "#yoman" ).draggable();
});
$( function() {
$( "#yoman" ).resizable();
});
</script>
</head>
<body>
<div id="yoman" class="ui-widget-content">
<img src = "https://www.froala.com/assets/blog/pages/post41_2.png" width="100px" height="100px">
</div>
</body>
上传文件工作正常，但现在我试图验证文件扩展名，看起来像有之间的一些干扰FileUpload1和FileUpload2。
FileUpload1用于上传 .jpg 或 .png 图像，以及FileUpload2上传 .pdf 文件。
这是在BtnInsert_Click事件上执行的代码：
protected void BtnInsert_Click(object sender, EventArgs e)
{
string[] validPhotoFile = { ".jpg", ".png" };
string validPDFFile = ".pdf";
string photoExt = System.IO.Path.GetExtension(FileUpload1.PostedFile.FileName);
string pdfExt = System.IO.Path.GetExtension(FileUpload2.PostedFile.FileName);
bool isValidPhotoFile = false;
bool isValidPDFFile = false;
for (int i = 0; i < validPhotoFile.Length; i++)
{
if (photoExt == "." + validPhotoFile[i])
{
isValidPhotoFile = true;
break;
}
}
for (int i = 0; …我一直在努力解决这个问题几个小时。我想从输入标签调整图像大小，然后将其上传到服务器。这是我的尝试。
我的输入元素：
<Input type="file" name="file" onChange={this.handleLoadAvatar} />
我的handleLoadAvatar功能：
handleLoadAvatar(e) {
var file = e.target.files[0];
var img = document.createElement("img");
var reader = new FileReader();
reader.onload = (e) => {
img.src = e.target.result;
}
reader.readAsDataURL(file);
var canvas = document.createElement('canvas');
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var MAX_WIDTH = 300;
var MAX_HEIGHT = 300;
var width = img.width; // GET STUCK HERE
var height = img.height;
if (width > height) {
if (width > MAX_WIDTH) {
height *= MAX_WIDTH / …javascript ×9
html5 ×4
canvas ×2
file-upload ×2
html ×2
ios ×2
jquery ×2
ajax ×1
asp.net ×1
c# ×1
camera ×1
client-side ×1
crop ×1
css ×1
html5-canvas ×1
mobile ×1
php ×1
post ×1
reactjs ×1
validation ×1