php上传文件回显,ajax实现文件异步上传并回显文件相关信息功能示例

本文实例讲述了ajax实现文件异步上传并回显文件相关信息功能。分享给大家供大家参考,具体如下:

上传文件的信息

应用文件

ajax提交

$("#subm").click(function(){

var formData = new FormData();

formData.append("appFile", document.getElementById("appFile").files[0]);

alert("8888888888888888888888888");

$.ajax({

url: '${ctx}/appresources/fileUpload.shtml',

type: "POST",

data: formData,

dataType: "json",

contentType: false,

processData: false,

success: function (data) {

alert("上传成功");

$("#versionCode").val(data.versionCode);

$("#appVersion").val(data.appVersion);

$("#appPackageName").val(data.appPackageName);

},

error: function () {

alert("上传失败!");

}

});

});

后台处理:

@ResponseBody

@RequestMapping("fileUpload")

public JSONObject fileUpload(MultipartFile appFile,Model model,HttpServletRequest request,HttpServletResponse response) {

ServletContext

//........................省略

String infos=ApkUtil.getApkInfo(needPath+"source"+File.separator+"apk"+File.separator+fileName);

String[] info=infos.split(",");

String versionCode=info[0];//版本号

String versionName=info[1];//版本名

String packageName=info[2];//包名

String appName=fileName;

AppResourcesFormMap appResourcesFormMap = getFormMap(AppResourcesFormMap.class);

appResourcesFormMap.put("appName",fileName);

appResourcesFormMap.put("appVersion",versionName);

appResourcesFormMap.put("appPackageName",packageName);

appResourcesFormMap.put("versionCode", versionCode);

System.out.println(appResourcesFormMap);

//model.addAttribute("appresources", appResourcesFormMap);

JSONObject fromObject = JSONObject.fromObject(appResourcesFormMap);

//String string = fromObject.toString();

return fromObject;

}

希望本文所述对大家ajax程序设计有所帮助。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现vue+ajax+php的多图片上传回显,可以按照以下步骤进行: 1.在前端使用Vue的上传组件,设置multiple属性为true,允许用户上传多张图片。 2.在上传组件的change事件中获取用户选择的图片文件,使用FormData对象将图片文件封装成表单数据。 3.使用axios或其他网络请求库将表单数据发送到服务器端。 4.在服务器端接收到表单数据后,解析出图片文件并保存到服务器的指定文件夹中。 5.将图片文件的URL返回给前端,用于回显图片。 下面是一个简单的示例代码: 前端代码: ```html <template> <div> <input type="file" ref="fileInput" @change="handleUploadChange" multiple> <button @click="uploadImages">上传图片</button> <div v-if="imageUrls.length > 0"> <div v-for="imageUrl in imageUrls" :key="imageUrl"> <img :src="imageUrl" style="width: 200px; height: 200px;"> </div> </div> </div> </template> <script> import axios from 'axios' export default { data () { return { imageFiles: [], imageUrls: [] } }, methods: { handleUploadChange () { this.imageFiles = Array.from(this.$refs.fileInput.files) }, uploadImages () { const formData = new FormData() this.imageFiles.forEach(file => { formData.append('images[]', file) }) axios.post('/api/upload_images.php', formData) .then(response => { this.imageUrls = response.data.imageUrls }) .catch(error => { console.log(error) }) } } } </script> ``` 后端代码(使用PHP): ```php <?php if ($_SERVER['REQUEST_METHOD'] === 'POST') { $imageUrls = []; $uploadDir = '/path/to/upload/folder/'; foreach ($_FILES['images']['error'] as $key => $error) { if ($error === UPLOAD_ERR_OK) { $tmpName = $_FILES['images']['tmp_name'][$key]; $fileName = basename($_FILES['images']['name'][$key]); $uploadPath = $uploadDir . $fileName; move_uploaded_file($tmpName, $uploadPath); $imageUrls[] = '/upload/' . $fileName; } } header('Content-Type: application/json'); echo json_encode(['imageUrls' => $imageUrls]); } ``` 在上面的示例代码中,使用了PHP的$_FILES变量来获取上传的图片文件。通过遍历$_FILES['images']['error']数组,可以判断每个文件是否上传成功。如果上传成功,将文件移动到指定的上传目录中,并将文件的URL保存到$imageUrls数组中。最后,将$imageUrls数组以JSON格式返回给前端,用于回显图片。 需要注意的是,上传文件时需要确保服务器端的上传目录有写入权限,否则会导致上传失败。同时,需要对上传文件进行安全性检查,防止上传恶意文件

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值