JFinal使用ajaxfileupload实现图片上传及预览

以下是使用 JFinal 和 ajaxfileupload 实现图片上传及预览的完整攻略。

准备工作

首先，你需要在你的项目中引入 JFinal 和 ajaxfileupload，具体引入方式可以参考官方文档。

接着，你需要准备一个接口用于接收上传的图片，并返回图片的路径或其他信息，可以在你的 JFinal Controller 中编写一个如下的示例方法：

public void uploadImage() {
    UploadFile file = getFile("image");
    String filePath = "/img/" + file.getFileName();
    renderJson(filePath);
}

这里假设你上传的图片都保存在项目的 /img 目录下。

实现图片上传及预览

接下来，我们来实现图片上传及预览功能，具体步骤如下：

在你的页面中添加一个用于选择图片的表单元素，例如：

html <input type="file" name="image" id="image">
在你的页面中添加一个用于预览图片的区域，例如：

html <div id="imgPreview"></div>
在你的页面中添加一个用于触发图片上传的按钮，例如：

html <button id="uploadBtn">上传图片</button>
在你的页面中添加以下 JavaScript 代码：

```javascript
$(function() {
$('#image').on('change', function() {
var file = $(this).get(0).files[0];
if (file) {
var reader = new FileReader();
reader.onload = function() {
var imgUrl = reader.result;
$('#imgPreview').html('');
}
reader.readAsDataURL(file);
}
});
```
$('#uploadBtn').on('click', function() {
    var file = $('#image').get(0).files[0];
    if (file) {
        $.ajaxFileUpload({
            url: '/uploadImage',
            secureuri: false,
            fileElementId: 'image',
            dataType: 'json',
            success: function(data) {
                var imgUrl = data;
                $('#imgPreview').html('<img src="' + imgUrl + '" />');
                alert('图片上传成功！');
            },
            error: function(data) {
                alert('图片上传失败！');
            }
        });
    }
});
```
});
```

这段代码的作用分别是：
- 绑定选择图片表单元素的 change 事件，当选择图片时，将预览图片的区域更新为所选择的图片；
- 绑定上传按钮的 click 事件，当点击上传按钮时，发起上传图片的请求，并在上传成功时更新预览图片的区域。
关于 $.ajaxFileUpload 函数的使用说明：
- url 参数表示上传图片的接口地址；
- secureuri 参数设置为 false；
- fileElementId 参数表示选择图片的表单元素的 id；
- dataType 参数设置为 json；
- success 回调函数，处理上传成功的操作；
- error 回调函数，处理上传失败的操作。

至此，我们已经完成了基于 JFinal 和 ajaxfileupload 的图片上传及预览功能的实现。

示例说明

以下是两个示例，演示了在 JFinal 中使用 ajaxfileupload 实现图片上传及预览的过程。

示例一：简单实现图片上传及预览功能

在你的 JFinal 项目中编写一个如下的 Controller：

```java
public class ImageController extends Controller {
public void index() {
render("index.html");
}
```
public void uploadImage() {
    UploadFile file = getFile("image");
    String filePath = "/img/" + file.getFileName();
    renderJson(filePath);
}
```
}
```
在你的 JFinal 项目中创建一个名为 image.html 的 HTML 文件，添加以下页面元素：

html <input type="file" name="image" id="image"> <button id="uploadBtn">上传图片</button> <div id="imgPreview"></div>

在你的 JFinal 项目中添加以下 JavaScript 代码：

```javascript
$(function() {
$('#image').on('change', function() {
var file = $(this).get(0).files[0];
if (file) {
var reader = new FileReader();
reader.onload = function() {
var imgUrl = reader.result;
$('#imgPreview').html(' JFinal使用ajaxfileupload实现图片上传及预览 ');
}
reader.readAsDataURL(file);
}
});

$('#uploadBtn').on('click', function() {
    var file = $('#image').get(0).files[0];
    if (file) {
        $.ajaxFileUpload({
            url: '/uploadImage',
            secureuri: false,
            fileElementId: 'image',
            dataType: 'json',
            success: function(data) {
                var imgUrl = data;
                $('#imgPreview').html('<img src="' + imgUrl + '" />');
                alert('图片上传成功！');
            },
            error: function(data) {
                alert('图片上传失败！');
            }
        });
    }
});

});
```

启动你的 JFinal 项目，在浏览器中访问 http://localhost:8080/image，即可看到一个用于上传图片的表单。

示例二：使用 bootstrap 和 toastr 弹窗样式优化图片上传及预览功能

在你的 JFinal 项目中编写一个如下的 Controller：

```java
public class ImageController extends Controller {
public void index() {
render("index.html");
}
```
public void uploadImage() {
    UploadFile file = getFile("image");
    String filePath = "/img/" + file.getFileName();
    renderJson(filePath);
}
```
}
```
在你的 JFinal 项目中创建一个名为 image.html 的 HTML 文件，添加以下页面元素：

```html

选择图片：

```

在你的 JFinal 项目中添加以下 JavaScript 代码：

$('#uploadBtn').on('click', function() {
    var file = $('#image').get(0).files[0];
    if (file) {
        $.ajaxFileUpload({
            url: '/uploadImage',
            secureuri: false,
            fileElementId: 'image',
            dataType: 'json',
            success: function(data) {
                var imgUrl = data;
                $('#imgPreview').html('<img src="' + imgUrl + '" />');
                toastr.success('图片上传成功！');
            },
            error: function(data) {
                toastr.error('图片上传失败！');
            }
        });
    }
});

});
```

在你的 JFinal 项目中引入 bootstrap 和 toastr 的 CSS 和 JavaScript 文件，优化页面样式及提示信息。
启动你的 JFinal 项目，在浏览器中访问 http://localhost:8080/image，即可看到一个用于上传图片的表单，样式已经进行了优化，上传成功后使用 toastr 弹窗提示。