php用户多图预览上传,单页面实现多处多图片预览上传?

可以考虑用form+iframe模拟AJAX异步上传:

form的target设为页面内的一个iframe,让这个iframe显示action请求后的内容.

能够实现单页面多处多图片预览上传,不需要任何插件,支持IE8.

if(isset($_POST['submit']) && !empty($_FILES['file'])) {

$i = 0;

foreach( $_FILES['file']['name'] as $v ) {

move_uploaded_file($_FILES['file']['tmp_name'][$i], 'uploads/'.$v);

$i++;

}

header('Content-Type: text/html; charset=utf-8');

echo '';

foreach( $_FILES['file']['name'] as $v ) {

echo ''.%24v.'


';

}

exit();

}

if(isset($_POST['submit2']) && !empty($_FILES['file2'])) {

$i = 0;

foreach( $_FILES['file2']['name'] as $v ) {

move_uploaded_file($_FILES['file2']['tmp_name'][$i], 'uploads/'.$v);

$i++;

}

header('Content-Type: text/html; charset=utf-8');

echo '';

foreach( $_FILES['file2']['name'] as $v ) {

echo ''.%24v.'


';

}

exit();

}

?>

jQuery "AJAX" upload

* { margin: 0; padding: 0; }

#con { width: 360px; margin: 10px; }

input { display: block; margin: 10px; }

PHP upload

style="display:none;border:1px solid #AAAAAB;width:200px;height:400px;">

PHP upload 2

style="display:none;border:1px solid #AAAAAB;width:200px;height:400px;">

$(document).ready(function(){

$('input.submit').click(function(){

$('iframe.ul_frame').show();

});

$('input.submit2').click(function(){

$('iframe.ul_frame2').show();

});

});

bVzmrX

  • 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、付费专栏及课程。

余额充值