$.ajax({ url: editor.config.imageUploadURL, type: 'POST', data: formData, processData: false, contentType: false, success: function(data, textStatus, jqXHR){ var isNew; if (jqXHR.status == 200) { maxWidth = Math.min(inputWidth, 700); maxHeight = Math.min(inputHeight, 700); width = inputWidth; height = inputHeight; if (inputWidth > maxWidth){ width = maxWidth; height = inputHeight * maxWidth / inputWidth; } if (height > maxHeight){ width = width * maxHeight / inputHeight; height = maxHeight; } var html = '<img src="' + data + '" class="image-editor draggable" data-width="' + inputWidth + '" data-height="' + inputHeight + '" width="' + width + '">'; $("#" + curr).append(html); } },为图片添加拖拽功能,并且页面刷新之后也能拖拽
时间: 2024-01-07 14:04:20 浏览: 27
要为图片添加拖拽功能,可以使用jQuery UI库中的draggable方法。可以在成功上传图片后,动态添加类名为"draggable"的img标签,并在页面刷新时重新初始化。
代码示例:
1. 引入jQuery和jQuery UI库
```html
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
```
2. 修改上传成功后的回调函数,添加拖拽功能
```javascript
success: function(data, textStatus, jqXHR){
// 省略部分代码
var html = '<img src="' + data + '" class="image-editor draggable" data-width="' + inputWidth + '" data-height="' + inputHeight + '" width="' + width + '">';
$("#" + curr).append(html);
// 重新初始化拖拽功能
$(".draggable").draggable({
containment: "parent"
});
}
```
其中,containment选项指定拖拽范围为父元素,即图片只能在其父元素内拖拽。
相关问题
$.ajax发送contentType: 'multipart/form-data"',
`$.ajax()` 方法可以用来发送异步 HTTP 请求。当我们需要上传文件时,需要将 `contentType` 设置为 `'multipart/form-data'`,这样浏览器就会以多部分的形式发送数据,包括文件和其他表单数据。例如:
```javascript
$.ajax({
url: '/upload',
type: 'POST',
data: formData,
contentType: false,
processData: false,
success: function(response) {
console.log('上传成功');
},
error: function(error) {
console.log('上传失败');
}
});
```
在上面的示例中,`data` 是一个 `FormData` 对象,它包含了要上传的文件和其他表单数据。`contentType` 被设置为 `false`,因为我们使用的是 `FormData` 对象,浏览器会自动设置正确的 `Content-Type`。`processData` 也被设置为 `false`,因为我们不需要将数据转换为字符串。在成功或失败的回调函数中,我们可以处理上传结果。
$.ajxa({url:/a/aa})
你的提问有一些错误,应该是 `$.ajax({url:'/a/aa'})`,这是jQuery中发送AJAX请求的方法。其中,`url`参数表示请求的URL地址。其他常用参数还包括:
- `type`:请求方法,比如GET、POST等,默认为GET。
- `data`:要发送的数据,可以是普通对象、FormData对象等。
- `dataType`:服务器返回的数据类型,比如json、xml、html等。
- `success`:请求成功时的回调函数。
- `error`:请求失败时的回调函数。
以下是一个简单的示例:
```javascript
$.ajax({
url: '/api/data',
type: 'POST',
data: { name: '张三', age: 18 },
dataType: 'json',
success: function(data) {
console.log('请求成功:', data);
},
error: function(xhr, status, error) {
console.error('请求失败:', error);
}
});
```
以上代码中,发送一个POST请求到`/api/data`,发送的数据为`{ name: '张三', age: 18 }`,期望服务器返回JSON格式的数据。请求成功时会调用success回调函数,请求失败时会调用error回调函数。